本文介绍了1.0.x 和 1.2.x 之间的 AngularJS 范围差异的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

限时送ChatGPT账号..

随着下一个稳定版 AngularJS 的发布，我正在将我的应用程序从 1.0.8 版本迁移到 1.2.

As of the release of the next stable AngularJS, I am migrating my application from version 1.0.8 to 1.2.

在 AngularJS 1.0.8 中，可以为 follow 等指令设置一个独立的作用域.然后指令将使用它自己的 test() 函数而不是控制器的 test() 函数.

In AngularJS 1.0.8 it was possible to set up an isolated scope for directives like follow. The directive would then use its own test() function instead of the controller's test() function.

<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() 函数.

In AngularJS 1.2 this behavior doesn't work anymore. Clicking the button fires the controller's test() function now.

看这个jsFiddle比较:

See this jsFiddle comparison:

Angular 1.0.8Angular 1.2.0

究竟有哪些变化以及我如何重现旧行为?

What exactly has changes and how can I reproduce the old behavior?

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

I figured out I could place the directives template inside an extra HTML file or compile it as a string to get it working (jsFiddle) but it seems to be too much in my case, as the template is fixed and splitting the HTML over several partial HTML files is a hassle.

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

@elclanr's answer works fine when there are no other properties to share. I updated the jsFiddle to pass some arbitrary property. How should I proceed now?

推荐答案

看起来这是破坏性更改的预期结果:github/angular/angular.js/commit/... 在 1.2.0(在 rc3 之后)(https://github/angular/angular.js/blob/master/CHANGELOG.md - 见第一个1.2.0 的重大变化 - $compile):

It looks like this is an intended result of the breaking change: github/angular/angular.js/commit/… Which was pulled in 1.2.0 (after rc3) (https://github/angular/angular.js/blob/master/CHANGELOG.md - see the first breaking change for 1.2.0 - $compile):

修复了隔离作用域到处泄漏到同一元素上的其他指令的问题.

Fixes issue with isolate scope leaking all over the place into other directives on the same element.

Isolate 作用域现在仅可用于请求它的隔离指令及其模板.

非隔离指令不应该在同一个元素上获得隔离指令的隔离范围，而是接收原始范围(这是新创建的隔离范围的父范围).

A non-isolate directive should not get the isolate scope of an isolate directive on the same element,instead they will receive the original scope (which is the parent scope of the newly created isolate scope).

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

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

Notably: "The isolate scope is only applied to the template, but not to markup that was not contributed by the directive. Before 1.2 isolate scopes had a bug that caused this kind of leakage. The point of the isolate scope is that it only applies to the directive that declared it, and not to other directives or markup." (from tbosch)

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

Previous to 1.2.0 everything on the same DOM element shared the same scope. So 1.2.0 makes a substantial change to how directives with isolate scopes work.

这篇关于1.0.x 和 1.2.x 之间的 AngularJS 范围差异的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！