[AngularJS] 理解AngularJS Directive中的Scope

默认情况下, 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>

通过这样的方式, directive-one和directive-two都拥有了自己的$scope, 也就是说, 它们将不再使用mainController中的$scope. 那么做这样的修改之后, 页面将会出现什么结果呢?

答案是页面上出现两个"百度"链接按钮.

如上面所说的, 当directive拥有自己的$scope之后, 将不会影响mainController中的$scope, 所以, 这里的两个占位符自然就mainController中的site值来填充. 也就是"百度".

 

转载于:https://www.cnblogs.com/AmusementPark/p/4293006.html