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

问题描述

在我的角度应用程序，我有一个指令编辑。它写在角1.2.0版本，rc.2和运作良好，但是当我升级框架1.2.13版本 - 指令破门。我检查的能力与其他版本，和被搞糊涂了，因为指令只适用于三个版本：1.2.0rc1，1.2.0-rc.2和1.2.0-rc.3

在新的版本中这个指令只适用于二丑编辑：
1.指令的财产终端设置为真
2.编译元素链接功能

指令具有简单的逻辑：

1. 显示previously savedValue的


2. 单击按钮编辑 - >显示新的输入值


3. 单击确定按钮保存价值 - >显示新savedValue的

下面是code：

1. 这个版本的作品： http://plnkr.co/edit/VHZVzk?p = preVIEW


2. 这个版本的破坏： http://plnkr.co/edit/NffdDj?p = preVIEW


3. 该版本适用于新的插入： http://plnkr.co/edit/ 7msiY0？p = preVIEW

所以，我有一个问题：

1. 为什么这一切都发生了什么？


2. 什么1.2.0-RC *版本等之间的差异，即拆毁指令。


3. 有没有一种方法，比编译指令和增加终端特性进行修复指令更好，因为很多其他指令破吗？

解决方案

首先了解

他们实际上在一个孤立的范围的情况下，内容的编译与一个确定的范围的方式改变了一些东西。

的重大更改从1.2.0版本

请查看与1.2.0版本带来了重大更改：

  

  
• $编译：
    
  
    
  • 由于d0efd5ee，无论是在应用程序模板，或在其他一些指令模板中定义的子元素没有得到分离范围。从理论上说，任何人都不应该依赖这种行为，因为它是非常罕见的 - 在大多数情况下分离指令有一个模板
  
    
  • 由于909cabd3，无需分离范围指令没有从同一个元素上的分离指令得到分离范围。如果你的$ C $，c取决于这种行为（非分离指令需要从分离的范围内访问状态），改变指令分离使用范围当地人明确地传递这些。
  
    

  

在特定的情况下，你的编辑按钮无法访问您的隔离范围内实施的属性和方法。你能暂时不做，在那些RC版本。

快速的解决方案

不要用孤立的范围为你的指令。

更深的解决方案

您实际上是做一些很奇怪的。您创建一个孤立的范围，以获得 ngModel 绑定到你的指令使用的范围。

但是，随着 ngModel 指令工作不工作的方式。您有权要求由 ngModel 指令添加了 ngModelController 例如，使用一个被称为指令属性要求，你将与你的要求都的控制指令的名称填写，即ngModel。
那么你的链接的第四个参数功能将参照 ngModelController 实例，它是对角文档相当有据可查的。

所以！

• 请不要使用隔离范围，当你不需要它


• 记得隔离范围并不元素本身上直接访问了，但使用过程中的 $$ childHead 属性...但你不应该这样做！

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

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

Directive have simple logic:

1. show previously savedValue
2. click on button "EDIT" -> show input for new value
3. click on button "OK" to save value - > show new savedValue

Here is the code:

1. this version works: http://plnkr.co/edit/VHZVzk?p=preview
2. this version broken: http://plnkr.co/edit/NffdDj?p=preview
3. this version works with new insertions: http://plnkr.co/edit/7msiY0?p=preview

So, i have a questions:

1. Why it's all happens?
2. What differences between 1.2.0-rc* versions and other, that brake down directive.
3. Is there a way, better than compile directive and adding TERMINAL property to repair directive, because many other directives broken too?

解决方案

First understanding

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

Breaking Changes from version 1.2.0

Please see their breaking changes brought with version 1.2.0 :

• $compile:
  • due to d0efd5ee, Child elements that are defined either in the application template or in some other directives template do not get the isolate scope. In theory, nobody should rely on this behavior, as it is very rare - in most cases the isolate directive has a template.
  • due to 909cabd3, Directives without isolate scope do not get the isolate scope from an isolate directive on the same element. If your code depends on this behavior (non-isolate directive needs to access state from within the isolate scope), change the isolate directive to use scope locals to pass these explicitly.

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.

Fast solution

Don't use isolated scope for your directive.

Deeper solution

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

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.

So ! :

• 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屋！