AngularJS指令 - 隔离作用域和被继承作用域

我一直在试图理解隔离作用域和继承作用域在指令中的区别。这是我准备让自己明白一个例子：AngularJS指令 - 隔离作用域和被继承作用域

的HTML

<div ng-controller="AppController"> 
    <div my-directive> 
     Inside isolated scope directive: {{myProperty}} 
    </div> 

    <div my-inherit-scope-directive> 
     Inside inherited scope directive: {{myProperty}} 
    </div> 
</div>

的JS

angular.module("myApp", []) 
     .directive("myInheritScopeDirective", function() { 
      return { 
       restrict: "A", 
       scope: true 
      }; 
     }) 
     .directive("myDirective", function() { 
      return { 
       restrict: "A", 
       scope: {} 
      }; 
     }) 
     .controller("AppController", ["$scope", function($scope) { 
      $scope.myProperty = "Understanding inherited and isolated scope"; 
     }]);

执行与角1.1.5的代码，它可以作为我期望：由于是独立的范围，my-directive中的{{myProperty}}将为undefined，而对于我的继承范围指令，{{myProperty}}将具有值Understanding inherited and isolated scope。

但是在两个指令{{myProperty}}输出Understanding inherited and isolated scope中使用Angular-1.2.1执行。

我失踪了吗？

来源

2013-12-18 Anup Vasudeva

指令中的文本节点绑定到控制器范围。因此该指令的范围不起作用。我认为这从v1.2开始有changed。你必须使用你的指令模板：

.directive("myIsolatedDirective", function() { 
    return { 
     template: 'Inside isolated in template scope directive: {{myProperty}}', 
     restrict: "A", 
     scope: { 
      myProperty: '=' 
     } 
    }; 
})

检查this fiddle。

来源

2013-12-18 11:32:36

感谢@Reto，如果它从控制器继承属性，那么v1.2中的隔离范围又有什么意义呢？ –

这是关于指令中的模板。如果从“myIsolatedDirective”中删除作用域隔离，则myProperty将被绑定到控制器作用域。我认为1.1.x中的行为并非如Vojta所述：“在应用程序模板或其他指令模板中定义的子元素不能获得隔离范围。理论上，没有人应该依赖这种行为，因为它非常罕见 - 在大多数情况下，隔离指令有一个模板。“ –

感谢@Reto或解释。 –

AngularJS指令 - 隔离作用域和被继承作用域

回答

相关问题