Question

我指的是AngularJS研究材料并试图实施“具有隔离范围的指令”，但它不起作用。请找到下面给出的代码片段，我已经完成了。

HTML：

<body ng-app="myApp">
  <div ng-init="myProperty = 'wow, this is cool'">
    Surrounding scope: {{ myProperty }}

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

    <div my-directive>
        Inside myDirective, isolate scope: {{ myProperty }}
    <div>
  </div>
</body>

JS：

var app = angular.module('myApp', []);

app.directive('myDirective', function() {
  return {
    restrict: 'A',
    scope: {}
  };
});

app.directive('myInheritScopeDirective', function() {
  return {
    restrict: 'A',
    scope: true
  };
});

Angular JS：

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.js"></script>

实际输出：

Surrounding scope: wow, this is cool
Inside an directive with inherited scope: wow, this is cool
Inside myDirective, isolate scope: wow, this is cool

预期产出：

Surrounding scope: wow, this is cool
Inside an directive with inherited scope: wow, this is cool
Inside myDirective, isolate scope:

差异在于产出的最后一行。

我同意，SO上已经出现了几个类似标题的问题。我经历过他们，相信我，没有人能回答我的疑问。所以，考虑根据我的要求提出问题。

Answer 1

根据Angular's compile.js文档评论，（针对指令的scope属性）

{...}（对象哈希）：为指令的模板创建了一个新的“隔离”范围。 'isolate'范围与正常范围的不同之处在于它不是原型继承自其父范围。这在创建可重用组件时非常有用，这些组件不应该意外地读取或修改父范围中的数据。 请注意，没有template或templateUrl的隔离范围指令不会将隔离范围应用于其子元素。

而且，在这里你没有template / templateUrl所以它就是这样的。

这是your working example with template

修改：这是closed github issue regarding this 解释原因：

gkalpak

的评论

事实上，依赖于HTML中的组件指令的内部结构听起来并不是一种好的做法（即，如果内容是特定于某个组件，则让子DOM元素假定某些关于其父项的指令的内容），他们喜欢它的模板。

在这方面，这听起来合理。

编辑2 ：这是作为Angular@1.2.0 timely-delivery (2013-11-08)的一部分引入的，因此无论如何它都适用于之前的版本。

根据CHANGELOG :( v1.2.0重大变化）

<强> $编译：


由于d0efd5ee，在应用程序模板或某些其他指令模板中定义的子元素不会获得隔离范围。从理论上讲，没有人应该依赖这种行为，因为它非常罕见 - 在大多数情况下，isolate指令都有一个模板。

AngularJS指令隔离范围无效

1 个答案: