具有隔离范围版本的指令冲突 [英] Directives with Isolated scope versions conflict

问题描述

在我的 Angular 应用程序中，我有一个可编辑"指令.它写在 Angular 1.2.0-rc.2 版上并且运行良好，但是当我将框架升级到 1.2.13 版时 - 指令坏了.我检查了其他版本的功能，但很困惑，因为指令仅适用于三个版本:1.2.0rc1、1.2.0-rc.2 和 1.2.0-rc.3

In my Angular app, i have a directive "editable". It written on Angular version 1.2.0-rc.2 and worked well, but when I upgraded framework to version 1.2.13 - directive broke. I checked capability with other versions, and was confused, because directive works only with three versions: 1.2.0rc1, 1.2.0-rc.2 and 1.2.0-rc.3

在新版本中，此指令仅适用于两个丑陋的1.指令的属性终端"设置为真"2.在link"函数中编译元素

In new versions this directive works only with two ugly edits: 1. directive's property "terminal" set to "true" 2. compile element in "link" function

指令有简单的逻辑:

1. 显示以前保存的值
2. 点击编辑"按钮 -> 显示新值的输入
3. 点击确定"按钮保存值 -> 显示新的保存值

代码如下:

1. 此版本有效:http://plnkr.co/edit/VHZVzk?p=preview
2. 此版本已损坏:http://plnkr.co/edit/NffdDj?p=preview
3. 此版本适用于新的插入:http://plnkr.co/edit/7msiY0?p=预览

所以，我有一个问题:

1. 为什么会这样?
2. 1.2.0-rc* 版本与其他版本之间有什么区别，即停止指令.
3. 有没有比编译指令和添加 TERMINAL 属性来修复指令更好的方法，因为许多其他指令也被破坏了?

推荐答案

初识

在隔离范围的情况下，他们实际上改变了针对确定范围编译内容的方式.

First understanding

They actually changed something in the way the contents are compiled against a determined scope in case of an isolated scope.

请查看 1.2.0 版带来的重大更改:

Please see their breaking changes brought with version 1.2.0 :

• $compile:
  • 由于 d0efd5ee，在应用程序模板或某些其他指令模板中定义的子元素不会获得隔离范围.理论上，没有人应该依赖这种行为，因为这种行为非常罕见 - 在大多数情况下，isolate 指令有一个模板.
  • 由于 909cabd3，没有隔离范围的指令不会从同一元素上的隔离指令获得隔离范围.如果您的代码依赖于这种行为(非隔离指令需要从隔离范围内访问状态)，请更改隔离指令以使用范围局部变量显式传递这些.

  在您的特定情况下，您的编辑按钮无法访问您在隔离范围内实现的属性和方法.您可以在那些rc"版本中暂时做到这一点.

  In your specific case, your edit button cannot access the properties and methods you implemented on the isolated scope. You were able to do that temporarily in those "rc" versions.

  不要为您的指令使用孤立的作用域.

  Don't use isolated scope for your directive.

  你实际上在做一些很奇怪的事情.您创建一个隔离的作用域来将 ngModel 绑定到您的指令使用的作用域.

  You are actually doing something quite weird. You create an isolated scope to get ngModel binded to the scope used by your directive.

  但是，使用 ngModel 指令不能那样工作.您必须使用 ngModel 指令添加的 ngModelController 实例，使用名为 require 的指令属性，您将使用该指令的名称填充您需要控制器的指令，即ngModel".然后 link 函数的第四个参数将引用 ngModelController 实例，该实例在 Angular 文档中得到了很好的记录.

  But, working with the ngModel directive doesn't work that way. You have to require the ngModelController instance added by the ngModel directive, using a directive property called require, that you will fill with the name of the directive your are requiring the controller of, that is to say "ngModel". Then the forth argument of your link function will refer to the ngModelController instance which is quite well documented on the Angular documentation.

  所以！:

  • 不要在不需要时使用隔离作用域
  • 记住，除了使用 $$childHead 属性之外，元素本身不再可以直接访问隔离作用域……但你不应该这样做！
  • don't use isolated scope when you don't need it
  • remember isolated scope is not directly accessible on the element itself anymore, except using the $$childHead property of course ... but you should not do that !

  这篇关于具有隔离范围版本的指令冲突的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！