【问题标题】:AngularJS: Calling a directive function from a controller the right wayAngularJS:以正确的方式从控制器调用指令函数
【发布时间】:2014-11-05 18:35:37
【问题描述】:

我有两种情况:

  1. 从指令 (see plunk) 调用控制器中定义的函数。

该指令包含一个“&”范围限制以关联控制器和指令功能。如果单击文本,则会在指令中触发元素单击事件并调用控制器函数。 $scope.$apply() 用于通知 AngularJS 点击事件并在屏幕上刷新 var 的值。

  1. 从控制器 (see plunk) 调用指令中定义的函数。

该指令没有任何范围限制,这意味着控制器中的$scope 和指令中的scope 是共享的。我在可以从控制器调用的指令中定义了func1()(尝试单击文本),但它似乎具有侵入性,因为控制器需要知道函数的名称。

有没有办法定义func1(),在指令div中声明函数名,类似于场景1?

【问题讨论】:

    标签: angularjs


    【解决方案1】:

    根据您构建组件的方式,这两个选项都是可行的和可接受的。

    选项 1 - 控制器应该注册监听器/回调并在指令上设置属性(当使用隔离范围时 - 我推荐)。控制器不应调用指令函数,而应更改已绑定在指令上的属性。如果设置正确,该指令应该观察这个属性并相应地更新。

    在我看来,指令不应该知道他们的控制器是谁,它促进了解耦代码。相反,控制器应该设置指令可以在适当的时间调用的回调函数(即让控制器知道某些东西被点击、选择、删除、滑动等......)

    选项 2 - 当您构建提供结构和行为逻辑但未定义实际单个组件 UI(不包括可能的骨架 UI)的 Web 组件时,我可以接受。例如一个列表指令。单独的列表可能没有在指令中定义,而是为每个上下文或使用“插入”,为我们提供了一个更加模块化和可重用的组件。它确实需要我们了解有关指令的一些信息。它还要求我们修改嵌入函数以在被嵌入的内容上使用指令范围,而不是原来的控制器范围。例如,您可以签出我作为示例制作的列表组件。

    http://github.com/Spidy88/ng-web-components

    来自此html page 的文本的 sn-p。 sf-list 指令是定义列表行为的隔离范围指令。但是,我们仍然可以通过修改的嵌入来定义每个单独的列表项的外观。它依赖于我们调用selectItem 来触发列表上的选择行为。

    <sf-list items="ctrl.emails" listener="ctrl.adapter">
        <div class="list-item email" ng-click="selectItem(item)" ng-repeat="item in items track by item.id">
            <div class="from">{{ item.from }}:</div>
            <div class="subject">{{ item.subject }}</div>
        </div>
    </sf-list>
    

    【讨论】:

    • 感谢 Spidy。你说instead should change an attribute that has been bound on the directive你能举一个属性的例子,当改变时触发一个函数调用?
    • 对于这个“点击”的具体示例,我想不出您如何或为什么要更改属性以触发函数调用。看看我更新的最后一段,我认为这更好地回答了您在选项 2 中尝试做的事情。
    猜你喜欢
    • 2021-04-06
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2018-01-03
    • 1970-01-01
    • 2015-07-29
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多