1

我的页面将包含越来越多的具有通用功能的指令。在牢记最佳实践和性能的情况下，实现该功能的最佳方法是什么。

例如：

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

  1. 在鼠标悬停时显示隐藏层
  2. 隐藏 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>

选项 1. 指令：

appModule.directive('elemTest', [function() {
    return {
        restrict: 'E',
        templateUrl: '.......',
        replace: true,
        controller: function($scope, $element) {
        },
        link: function(scope, element) {
            element.on('mouseover', function() {
                element.find(".edit-controls").show();
            });

            element.on('mouseout', function() {
                element.find(".edit-controls").hide();
            });

            element.find(".edit").on('click', function(event){
                event.preventDefault();
                element.children(".view").hide();
                element.children(".edit").show();
            });
        }
    }
}]);

选项 2. 没有链接功能但使用页面底部的 jQuery 脚本片段处理 mouseover/out/click 事件的指令：

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

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

..........

选项 3. 带有控制器和 ng-click 的指令而不是指令链接功能？

选项 4。

4

1 回答 1

2

使用 Angular 1.2.0

选项 4：支持 ng-mouseover、ng-mouseout (mouseleave?) 和 ng-click 编辑按钮的指令。

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

在模板中：

...
<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
 }

}
于 2013-09-25T20:43:52.100 回答