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 スクリプト スニペットでマウスオーバー/アウト/クリック イベントを処理します。

$(".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 に答える