【问题标题】:AngularJS - nested directives without transclude?AngularJS - 没有嵌入的嵌套指令?
【发布时间】:2012-12-29 22:58:18
【问题描述】:

伴随plunker

我在 div 中有一个属性级自定义指令。该指令有一个孤立的范围。在我的 div 中,我还有其他指令希望在父级的范围内。

问题是 我的 div 中的指令只能访问隔离范围,而不是父范围。我明白为什么,但我不清楚如何干净地解决它。

我知道我可以使用 transclude 来解决这个问题(参见 plunker),但这感觉很草率。我不需要模板,但我必须创建一个模板才能使 transclude 工作,并且 transclude 似乎是确保我的嵌套指令可以访问正确范围的唯一方法。

有没有其他更清洁的方法来做到这一点?

为了避免一些可能的问题:

  • 我使用属性级指令而不是元素级指令来让 IE 更轻松
  • 我使用隔离作用域是因为它是一种最佳实践 - 我不想意外地占用我的父作用域,并且我希望指令是可移植的。

【问题讨论】:

    标签: angularjs


    【解决方案1】:

    我真的不确定您要尝试做什么。

    但是您实际上在做的是在一个孤立的作用域上利用双向绑定来产生不良影响。这似乎与您的问题无关。

    无论如何...here is an update to your plunker

    基本上发生的事情是在您的隔离指令内部,您需要使用您在范围声明中分配的任何名称,在本例中为toggleOn()

    但是,如果您愿意 can do this。基本上只需拨打$parent.colorToggle()

    【讨论】:

    • 谢谢你。这两种解决方案都有效,但它们并不理想,因为 ng-click 需要知道它在一个孤立的范围内,而它确实应该能够假设它在父级中。我正在寻找的解决方案(如果存在!)是让我的 div 内的所有内容都在父范围内。
    • @Roy,我不确定我是否同意......在 ng-repeat、ng-view、ng-include 等中,您需要知道您处于子范围内。同样,当使用自定义指令时,我认为您需要知道您所处的范围(父、子、隔离)。角度文档指示哪些内置指令创建子范围。同样,我认为我们的自定义指令需要记录它们创建的范围(如果有的话)。
    【解决方案2】:

    你可以决定这是否比嵌入“不那么草率”:

    <button ng-click="$parent.colorToggle()">Inside</button>
    

    隔离作用域可以通过$parent 属性访问父作用域。尽管隔离作用域在原型上不会从其父作用域继承,但 Angular 仍然通过 $parent 和 $$childHead 和 $$childTail 维护层次结构。

    【讨论】:

    • @blesh 领先我几秒
    • 哈哈.. 8 秒!我赢了! :P(我当然是孩子,只要他的问题得到回答)
    • 很公平......也许我不会在下次发布之前阅读我的答案:)
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2017-01-13
    • 1970-01-01
    • 1970-01-01
    • 2016-09-25
    • 2015-10-24
    • 2015-03-25
    相关资源
    最近更新 更多