AngularJS 1.0.x 和 1.2.x 的作用域差异

Question

随着下一个稳定的 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>

Javascript

  .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 比较：

• Angular 1.0.8
• Angular 1.2.0

究竟发生了什么变化？如何重现旧行为？

注意

我发现我可以将指令模板放在一个额外的 HTML 文件中或将其编译为字符串以使其正常工作 (jsFiddle) 但在我的情况下似乎太多了，因为模板是固定的并且正在拆分多个部分 HTML 文件的 HTML 很麻烦。

编辑

@elclanr's answer 在没有其他要共享的属性时可以正常工作。我更新了the jsFiddle 以传递一些任意属性。我现在应该如何进行？

Answer 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）：

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

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

一个非隔离指令不应该在同一个元素上获得一个隔离指令的隔离作用域，而是他们将接收原始作用域（这是新创建的隔离作用域的父作用域）。

还可以查看此讨论：github.com/angular/angular.js/issues/4889

值得注意的是：“隔离范围仅适用于模板，而不适用于不是由指令贡献的标记。在1.2之前，隔离范围有一个导致这种泄漏的错误。隔离的要点范围是它只适用于声明它的指令，而不适用于其他指令或标记。"（来自 tbosch）

在 1.2.0 之前，同一 DOM 元素上的所有内容都共享相同的范围。 因此 1.2.0 对具有隔离范围的指令的工作方式进行了重大更改。

Answer 2

为了将普通标记与指令特定模板和函数结合起来，需要像这样使用 transclude 选项：

请参阅：jsFiddle

HTML

<div ng-app="myApp">
    <div ng-controller="Ctrl">
        <my-directive property="{{ something }}">
            <p>{{ text }}</p>
        </my-directive>
    </div>
</div>

Javascript

.controller('Ctrl', ['$scope', function($scope) {
    $scope.text = 'This is a controllers text.';
    $scope.something = 'This is another controllers text.';
}])
.directive('myDirective', function() {
    return {
        restrict: 'E',
        transclude: true,
        template: '<button ng-click="test()">Fire directives function</button><div ng-transclude></div><p>{{ property }}</p>',
        scope: {
            property: '@'
        },
        link: function(scope) {
            scope.test = function () {
                scope.property = 'Loaded directives text.';
            }
        }
    };
});

这对我来说现在很好，但应该注意的是不能覆盖范围的现有属性。

Answer 3

设置scope: true 应该可以解决问题。 http://jsfiddle.net/rug3J/1。我还建议遵循约定并将其命名为 scope 而不是 $scope 当它不是依赖注入时：

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