AngularJS自定义指令|菜鸟教程(2)

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

推荐阅读更多精彩内容