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

Question

我有两种方案：

1. 在控制器中定义的函数被从一个指令（see plunk）调用。

该指令包含'&'范围限制，用于将控制器和指令功能相关联。如果你点击文本，元素点击事件在指令中被触发，并且调用控制器函数。 $ scope。$ apply（）用于通知AngularJS点击事件并在屏幕上刷新var的值。

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

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

有没有一种方法来定义func1()，使得函数名称在指令div中声明，类似于情况1？

Answer 1

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

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

指令不应该知道他们的控制器是谁在我看来，它促进了解耦代码。相反，控制器应该设置指令可以在适当的时候调用的回调函数（即让控制器知道点击，选择，删除，刷卡等等）

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

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

文本从这个html page片段。 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>