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

AngularJS Scope differences between 1.0.x and 1.2.x

本文关键字：范围 AngularJS 之间      更新时间：2023-09-26

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

爪哇语

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

  • 角度 1.0.8
  • 角度 1.2.0

究竟有哪些变化，如何重现旧行为？

注意

我想出我可以将指令模板放在一个额外的 HTML 文件中或将其编译为字符串以使其工作 （jsFiddle），但就我而言似乎太多了，因为模板是固定的，将 HTML 拆分为几个部分 HTML 文件很麻烦。

编辑

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

看起来这是中断性更改的预期结果：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 之前，隔离范围有一个导致这种泄漏的错误。隔离作用域的要点是它仅适用于声明它的指令，而不适用于其他指令或标记。（来自特博斯）

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

设置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!';
      }
    }
  };

为了将普通标记与指令特定的模板和函数相结合，需要使用 transclude 选项，如下所示：

参见： jsFiddle

.HTML 

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

爪哇语

.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.';
            }
        }
    };
});

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

相关文章：