AngularJS指令隔离作用域不起作用

Question

AngularJS指令隔离作用域不起作用

4

我正在参考一个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上已经有几个标题相似的问题。我已经看过了它们，相信我，没有一个能够回答我的疑问。因此，考虑提出符合我的要求的问题。”

- Gautam G

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- tanmay · Accepted Answer

根据Angular的compile.js文档注释，（对于指令的scope属性）

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

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

这里是带有模板的工作示例

编辑：这里有一个关于此事的关闭github问题，解释了为什么:

gkalpak的评论

实际上，从HTML中依赖于组件指令的内部（即具有假设其父级指令的某些内容的子DOM元素）并不是一个好的做法 - 如果内容特定于组件，则应该放在其模板中。

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

编辑2: 这是作为Angular@1.2.0 timely-delivery (2013-11-08)的一部分引入的，因此在此之前的版本中也可以使用。

根据CHANGELOG: (v1.2.0 Breaking Changes)

$compile:

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