具有隔离范围版本的指令冲突

时间:2014-03-10 19:44:41

标签: javascript angularjs angularjs-directive angularjs-scope

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

在新版本中,此指令仅适用于两个丑陋的编辑: 1.指令的属性“终端”设置为“true” 2.在“link”函数中编译元素

指令有简单的逻辑:

  1. 显示以前已保存的值
  2. 点击按钮“编辑” - >显示新值的输入
  3. 点击“确定”按钮以保存价值 - >显示新的savedValue
  4. 以下是代码:

    1. 此版本有效:http://plnkr.co/edit/VHZVzk?p=preview
    2. 此版本已损坏:http://plnkr.co/edit/NffdDj?p=preview
    3. 此版本适用于新插入:http://plnkr.co/edit/7msiY0?p=preview
    4. 所以,我有一个问题:

      1. 为什么一切都会发生?
      2. 1.2.0-rc *版本与其他版本之间的差异,即制动指令。
      3. 有没有办法,比编译指令更好,并将TERMINAL属性添加到修复指令,因为许多其他指令也被破坏了?

1 个答案:

答案 0 :(得分:2)

第一个理解

在隔离范围的情况下,他们实际上已根据确定的范围更改了内容的编译方式。

从版本1.2.0突破变化

请参阅版本1.2.0带来的重大变化:

  
      
  • $编译:   
        
    • 由于d0efd5ee,在应用程序模板或某些其他指令模板中定义的子元素不会获得隔离范围。从理论上讲,没有人应该依赖这种行为,因为它非常罕见 - 在大多数情况下,isolate指令都有一个模板。
    •   
    • 由于909cabd3,没有隔离范围的指令不会从同一元素上的isolate指令获取隔离范围。如果您的代码依赖于此行为(非隔离指令需要从隔离范围内访问状态),请更改isolate指令以使用作用域locals明确传递这些行为。
    •   
  •   

在您的特定情况下,您的编辑按钮无法访问您在隔离范围上实现的属性和方法。您可以在那些“rc”版本中暂时执行此操作。

快速解决方案

不要在指令中使用隔离范围。

更深层次的解决方案

你实际上在做一些非常奇怪的事情。您可以创建一个隔离范围,以便将ngModel绑定到指令使用的范围。

但是,使用ngModel指令不起作用。您必须使用ngModelController指令添加的ngModel实例,使用名为require的指令属性,您将填写您需要控制器的指令的名称,即就是说“ngModel”。 然后,link函数的第四个参数将引用ngModelController实例,该实例在Angular文档中有很好的文档。

所以! :

  • 当您不需要时,请不要使用隔离范围
  • 记住隔离范围不再可以直接访问元素本身,除了当然使用$$childHead属性...但你不应该这样做!