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. {}类别的输入框的值不继承父域的值，新建作用域。父作用域的值不随子作用域变化。