1

我有两个例子支持上述说法——

1) 当使用 $scope ( http://plnkr.co/edit/kFM77mVReS7AUwZsNzCV?p=preview ) -

<!DOCTYPE html>
<html>

  <head>
    <script src="//code.angularjs.org/snapshot/angular.min.js"></script>
    <script>
      angular
          .module('myApp', [])
          .directive('directive1', function() {
            return {
              controller: ['$scope', function($scope) {
                $scope.name = 'Directive1';
              }]
            };
          })
          .directive('directive2', function() {
            return {
              controller: ['$scope', function($scope) {
                $scope.name = 'Directive2';
              }],
              scope: {}
            };
          })
          .directive('directive3', function() {
            return {
              template: 'I am {{name}}'
            };
          });
    </script>
  </head>

  <body ng-app='myApp'>
    <directive1>
      <directive2>
        <directive3>
        </directive3>
      </directive2>
    </directive1>
  </body>

</html>

2）使用控制器时（http://plnkr.co/edit/zmIRa1t87ZIMDS6X5rNo?p=preview）-

 <!DOCTYPE html>
<html>

  <head>
    <script src="//code.angularjs.org/snapshot/angular.min.js"></script>
    <script>
      angular
          .module('myApp', [])
          .directive('directive1', function() {
            return {
              controller: function() {this.name = 'Directive1';},
              controllerAs: 'ctrl1'
            };
          })
          .directive('directive2', function() {
            return {
              controller: function() {this.name = 'Directive2';},
              controllerAs: 'ctrl2',
              transclude: true,
              template: '<ng-transclude></ng-transclude>',
              scope: {}
            };
          })
          .directive('directive3', function() {
            return {
              template: 'I am {{ctrl1.name}}'
            };
          });
    </script>
  </head>

  <body ng-app='myApp'>
    <directive1>
      <directive2>
        <directive3>
        </directive3>
      </directive2>
    </directive1>
  </body>

</html>

两个代码的输出都是 -我是 Directive1，这表明directive3继承了directive1 的范围（它不会访问directive2的范围，因为它具有隔离范围），这证明我假设隔离范围会破坏它的父指令和它的子指令之间的继承链，因此它的任何子指令都不能访问它的任何祖先指令的范围。

我在这里遗漏了什么还是我的范围继承概念完全错误？

4

2 回答 2

1

输出 <...> 证明我错误地假设隔离范围会破坏其父指令和子指令之间的继承链

证明本身是错误的。此行为特定于无模板指令，类似于嵌入。在上面的代码directive1中没有自己的范围，并且$scope.name = 'Directive1'设置在根范围内。并且两者directive1都directive2使用根范围编译，因为它们没有模板也没有自己的范围。

如果指令有自己的模板，上述假设将是正确的，例如：

  .directive('directive2', function() {
    return {
      template: '<directive3>'
      controller: ['$scope', function($scope) {
        $scope.name = 'Directive2';
      }],
      scope: {}
    };
  })
于 2017-10-27T16:10:36.563 回答
0

在所有 3 个指令中使用scope:true，它将能够访问父级的所有范围

注意：scope:true 将继承父级的属性，但 scope:{} 不会继承父级的属性。

<!DOCTYPE html>
<html>

<head>
  <script src="//code.angularjs.org/snapshot/angular.min.js"></script>
  <script>
    angular
      .module('myApp', [])
      .directive('directive1', function() {
        return {
          controller: ['$scope', function($scope) {
            $scope.name = 'Directive1';
          }],
          scope: true
        };
      })
      .directive('directive2', function() {
        return {
          controller: ['$scope', function($scope) {
            $scope.name = 'Directive2';
          }],
          scope: true
        };
      })
      .directive('directive3', function() {
        return {
          template: 'I am {{name}}',
          scope: true
        };
      });
  </script>
</head>

<body ng-app='myApp'>
  <directive1>
    <directive2>
      <directive3></directive3>
    </directive2>
  </directive1>
  
  <br>
  
  <directive1>
    <directive3></directive3>
  </directive1>

  <br>

  <directive2>
    <directive3></directive3>
  </directive2>

</body>

</html>

于 2017-10-27T16:05:08.930 回答