[AngularJS] 理解AngularJS Directive中的Scope

浏览数：65 / 时间：2015年06月09日

默认情况下, AngluarJS不会为在一个Controller下的Directive创建一个单独的作用域(Scope). 这个Directive中的所有关于$scope的变量都是在它的Controller中定义, 并且会被其他的在同一Controller中的Directive所共享, 例如以下代码:

  <script>
    (function(angular) {
        angular.module(‘zzIsolateScopeTest‘, [])
            .directive("directiveOne", function () {
                return {
                    link : function($scope, $element, $attr) {
                        $scope.site = "腾讯";
                    }
                };
            })
            .directive("directiveTwo", function () {
                return {
                    link : function($scope, $element, $attr) {
                        $scope.site = "博客";
                    }
                };
            })
            .controller("mainController", function ($scope) {
                $scope.site = "百度";
            });
    })(window.angular);
  </script>

<div data-ng-controller="mainController">  
    <div class="row">
        <div class="col-md-3"><a data-directive-one class="btn btn-default btn-block">{{site}}</a></div>
    </div>
    <div class="row">
        <div class="col-md-3"><a data-directive-two class="btn btn-default btn-block">{{site}}</a></div>
    </div>
</div>

打开页面的结果是两个"博客"链接的按钮. 这是因为DirectiveTwo在最后将site的值修改为了"博客", 并且影响到了DirectiveOne原来所修改成的值"腾讯".

AngluarJS引入isloate scope的概念, 使得每个Directive都能拥有自己的$scope变量, 从而不会在多个Directive之间因共享变量而造成数据错误. 使用isolate scope的方法很简单, 只需要在Directive的代码中写入一个属性即可:

scope : {}

示例代码如下:

  <script>
    (function(angular) {
        angular.module(‘zzIsolateScopeTest‘, [])
            .directive("directiveOne", function () {
                return {
                    scope : {},
                    link : function($scope, $element, $attr) {
                        $scope.site = "腾讯";
                    }
                };
            })
            .directive("directiveTwo", function () {
                return {
                    scope : {},
                    link : function($scope, $element, $attr) {
                        $scope.site = "博客";
                    }
                };
            })
            .controller("mainController", function ($scope) {
                $scope.site = "百度";
            });
    })(window.angular);
  </script>