Angularjs使用通用功能实现多个指令的最佳实践

我的页面将有越来越多的具有通用功能的指令列表。实现该功能的最佳方法是什么？牢记最佳实践和性能

例如：

页面将有100条指令，每条指令将有公共事件：

在鼠标上方显示隐藏层

单击“隐藏div>查看”和“显示div>编辑”

模板：

<div class="panel">
    <div class="view">
        <div class="edit-controls hidden">
            <a href="#" class="edit">Edit</a>
        </div>
        <h3>{{......}}</h3>
        <p>{{.....}}</p>
    </div>
    <div class="edit hidden">
        <form>
            ........
        </form>
    </div>
</div>

备选案文2。指令，不带链接函数，但使用页面底部的jQuery脚本片段处理mouseover/out/click事件：

$(".panel").live('mouseover',function() { 
    .......
}) 

$(".panel").live('mouseout',function() { 
    .......
}) 

..........

备选案文3。带控制器的指令和ng click代替指令链接功能

备选方案4

使用角度1.2.0

选项4：支持ng mouseover、ng mouseout（mouseleave？）和ng单击编辑按钮的指令

简而言之，使您的指令具有支持以下功能的模板：

在模板中：

...
<div ng-mouseover="showEditControls = true" ng-mouseleave="showEditControls = false">
 <div ng-show="showEditControls">
  <button ng-click="edit()" />
 </div>
</div>
...

---

将通用指令功能分解为自己的指令。您可以在每个元素上放置多个指令作为属性。谢谢，Zack。这是一个很好的建议，因为我将有不同的指令，所有这些指令都在事件上共享！谢谢你的回复。在这种情况下，我可以看到使用ng mouseover和-mouseleave的好处。但是，为什么对不更改模型的事件使用控制器？对于事件侦听器来说，链接函数不是更好的地方吗？我说的是：element.find（“.edit”）.on（‘单击’，……如果需要更改视图，请将这些视图对象绑定到由视图的其他部分控制的范围变量。在您的示例中，

.view

的内容将隐藏，并显示

.edit

。单击edit时，只需将其ng show表达式分别更改为false和true即可。

...
<div ng-mouseover="showEditControls = true" ng-mouseleave="showEditControls = false">
 <div ng-show="showEditControls">
  <button ng-click="edit()" />
 </div>
</div>
...

...
controller: function($scope){
 $scope.edit = function()
  // do whatever the editor does
 }

}