代码之家 › 专栏 › 技术社区 › Rachit Belwariar

在AngularJS中,如果子指令无法访问其直接父的作用域,那么它会继承其最近的、非隔离的祖先的作用域吗?

isolated-scope angularjs-scope inheritance angularjs

Rachit Belwariar · 技术社区 · 7 年前

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

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>

我有方向感1 这表明 指导性3 继承的范围 方向1 (它不会访问 指导性2 因为它有一个独立的作用域),这证明了我错误地假设一个独立的作用域会破坏其父指令和子指令之间的继承链,因此它的子指令都无法访问其任何祖先指令的作用域。

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

2 回复 | 直到 7 年前

Estus Flask 7 年前

输出<&燃气轮机;证明了我错误地假设一个孤立的作用域会破坏其父指令和子指令之间的继承链

证据本身是错误的。这种行为特定于无模板指令,类似于转换。在上述代码中 directive1 没有自己的范围,并且 $scope.name = 'Directive1' 在根范围上设置。两者都有 方向1 和 directive2 使用根作用域编译,因为它们没有模板,也没有自己的作用域。

  .directive('directive2', function() {
    return {
      template: '<directive3>'
      controller: ['$scope', function($scope) {
        $scope.name = 'Directive2';
      }],
      scope: {}
    };
  })

ferhado 7 年前

使用 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>