一尘不染

1.0.x和1.2.x之间的AngularJS范围差异

angularjs

在下一个稳定的AngularJS发行时,我将应用程序从 1.0.8 迁移到 1.2

在AngularJS 1.0.8中
,可以为诸如的指令设置隔离范围follow。然后,该指令将使用其自己的test()功能而不是控制器的test()功能。

的HTML

<my-dialog property="something">
    <button ng-click="test()">Load Test</button>
    Check out the test: "{{ testMessage }}"
</my-dialog>

Java脚本

  .controller('Ctrl', function(scope) {
    scope.test = function () {
       scope.testMessage = 'CTRL Test loaded! Whooops.';
    }
  })

  .directive('myDialog', function() {
    return {
      restrict: 'E',
      scope: {
          property: '='
      },
      link: function(scope) {
          scope.test = function () {
            scope.testMessage = 'Isolated Test loaded. Yes!';
          }
      }
    };

在AngularJS 1.2中, 此行为不再起作用。单击该按钮将立即激活控制器的test()功能。

参见以下jsFiddle比较:

到底发生了什么变化,我该如何重现旧的行为?

注意

我发现我可以将指令模板放置在额外的HTML文件中,或者将其编译为字符串以使其正常工作(jsFiddle),但在我看来,这太多了,因为模板已固定并将HTML分成几个部分HTML文件很麻烦。

编辑

当没有其他属性可共享时,@
elclanr的答案
可以正常工作。我更新了jsFiddle以传递一些任意属性。我现在应该如何进行?


阅读 193

收藏
2020-07-04

共1个答案

一尘不染

看起来这是突破性更改的预期结果:github.com/angular/angular.js/commit/…它是在1.2.0版(在rc3之后)(https://github.com/angular/angular。
js / blob / master /
CHANGELOG.md-请参阅1.2.0的第一个重大更改-$
compile):

修复了隔离范围到处泄漏到同一元素的其他指令中的问题。

现在,隔离范围仅可用于请求隔离范围及其模板的隔离指令。

非isolate指令不应在同一元素上获得isolate指令的isolate范围,相反,它们将接收原始范围(这是新创建的isolate范围的父范围)。

还请查看此讨论:github.com/angular/angular.js/issues/4889

值得注意的是:“隔离范围仅适用于模板,不适用于该指令未提供的标记。1.2之前的隔离范围存在导致这种泄漏的错误。 隔离范围的要点是它仅适用于 模板
到声明它的指令,而不是其他指令或标记。 ”(来自tbosch)

1.2.0 之前的版本中,同一DOM元素上的所有内容都共享同一范围。 因此,1.2.0对具有独立作用域的指令的工作方式进行了重大更改。

2020-07-04