Question

我有两种情况：

从指令（see plunk）调用控制器中定义的函数。

该指令包括'＆amp;'范围限制，用于关联控制器和指令功能。如果单击文本，则在指令中触发元素单击事件，并调用控制器函数。 $ scope。$ apply（）用于通知AngularJS click事件并刷新屏幕上的var值。

从控制器（see plunk）调用指令中定义的函数。

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

有没有办法以这样的方式定义func1()，使得函数名在指令div中声明，类似于场景1？

Answer 1

取决于您构建组件的方式，这两个选项都是可行且可接受的。

选项1 - 控制器应该注册监听器/回调并在指令上设置属性（当使用隔离范围时 - 我建议）。控制器不应该调用指令函数，而应该更改已绑定在指令上的属性。正确设置的指令应该是观察该属性并相应地更新。

指令不应该知道我的控制器是谁，它会促进解耦代码。相反，控制器应该设置指令可以在适当的时间调用的回调函数（即让控制器知道被点击，选择，删除，刷过等的东西......）

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

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

此html page的一段文字。 sf-list指令是一个隔离的scope指令，用于定义列表行为。但是，我们仍然可以使用修改后的转换来定义每个列表项的外观。它依赖于我们来调用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>

AngularJS：以正确的方式从控制器调用指令函数

1 个答案: