AngularJS 指令 | 菜鳥教程(2)

• scope:Boolean or Object

scope參數的作用是，隔離指令與所在控制器間的作用域、隔離指令與指令間的作用域。

scope參數是可選的，默認值為false，可選true、對象{};

false：共享父域
true：繼承父域，且新建獨立作用域
Object：不繼承父域，且新建獨立作用域

指令scope參數——false、true、{}對比測試

view1.html

parent:

    <span>{{parentName}}</span>
    <input type="text" ng-model="parentName" />
</div>
<br>
<child-a></child-a>
<br>
<child-b></child-b>
<br>
<child-c parent-name="parentName"></child-c>

view1.js

    .config(['$routeProvider', function ($routeProvider) {
        $routeProvider.when('/view1', {
            templateUrl: 'view1/view1.html',
            controller: 'View1Ctrl'
        });
    }])

    .controller('View1Ctrl', ['$scope',
        function ($scope) {
            $scope.parentName = "這里是測試文本";
        }])

    //false：共享作用域
    .directive('childA', function () {
        return {
            restrict: 'E',
            scope: false,
            template: function (elem, attr) {
                return "false:" + document.getElementById('hh').innerHTML;
            }
        };
    })
    //true：繼承父域，并建立獨立作用域
    .directive('childB', function () {
        return {
            restrict: 'E',
            scope: true,
            template: function (elem, attr) {
                return "true:" + document.getElementById('hh').innerHTML;
            },
            controller: function ($scope) {
               // $scope.parentName = "快使用雙截棍";
                //已聲明的情況下，$scope.$watch監聽的是自己的parentName
                $scope.$watch('parentName', function (n, o) {
                    console.log("child watch" + n);
                });

                //$scope.$parent.$watch監聽的是父域的parentName
                $scope.$parent.$watch('parentName', function (n, o) {
                    console.log("parent watch" + n);
                });
            }
        };
    })
    //{}：不繼承父域，建立獨立作用域
    .directive('childC', function () {
        return {
            restrict: 'E',
            scope: {},
            template: function (elem, attr) {
                return "{}:" + document.getElementById('hh').innerHTML;
            },
            controller: function ($scope) {
                console.log($scope);
            }
        };
    });

結論

我們可以看到

1. fasle類別的輸入框的值繼承父域的值。父作用域的值隨子作用域變化。
2. true類別的輸入框的值繼承父域的值，但新建作用域。父作用域的值不隨子作用域變化。
3. {}類別的輸入框的值不繼承父域的值，新建作用域。父作用域的值不隨子作用域變化。