在AngularJs中修飾ng-click指令

我一直在尋找修改AngularJS ng-click指令來添加一些附加功能。關於如何使用它，我有一些不同的想法，但最簡單的方法是將Google Analytics跟蹤添加到所有ng點擊，另一個是防止雙擊。在AngularJs中修飾ng-click指令

要做到這一點，我的第一個想法是使用裝飾。因此，像這樣：

app.config(['$provide', function($provide) { 
    $provide.decorator('ngClickDirective', ['$delegate', function($delegate) { 
    // Trigger Google Analytics tracking here 
    return $delegate; 
    }]); 
}]);

但是作爲裝飾是在實例解僱，而不是當該指令的表達得到滿足，這將不起作用。因此，在這種情況下，它會在加載指令的元素進行分析時，而不是單擊元素時進行分析。

所以就真正的問題。裝飾器是否有一些方法來獲取指令實例化的元素？如果我可以從委託人到達元素，我可以綁定自己的點擊事件以觸發除ng鍵之外的操作。

如果不是，你會如何去添加一些ng-clicks？

來源

2013-08-20 Erik Honn

您當然可以使用裝飾器添加功能。我做了一個快速plunkr來演示如何。基本上，在你的裝飾器體中，你用你自己的自定義邏輯代替編譯函數（在例子中，如果track屬性存在，綁定到click事件），然後調用原始編譯函數。這裏的片段：

$provide.decorator('ngClickDirective', function($delegate) { 
    var original = $delegate[0].compile; 
    $delegate[0].compile = function(element, attrs, transclude) { 
    if(attrs.track !== undefined) { 
     element.bind('click', function() { 
     console.log('Tracking this'); 
     }); 
    } 
    return original(element, attrs, transclude); 
    }; 
    return $delegate; 
})

來源

2013-08-20 13:31:44

啊。我太專注於尋找元素，而不是僅僅做一個新的功能：P謝謝！ –

@ErikHonn沒問題。我從來不需要使用裝飾器，這對我來說無疑是一個有趣的練習。 :) –

我不認爲這個工作了，因爲當我嘗試訪問代碼中的新範圍屬性是不可用的。這裏是小提琴http://jsfiddle.net/377vhfm4/3/ –

這是正確的更新版本（從應答提高）：當然

$provide.decorator('ngClickDirective', function($delegate) { 
    var compile = $delegate[0].compile; 
    $delegate[0].compile = function() { 
     var link = compile.apply(this, arguments); 
     return function(scope, element, attrs, transclude) { 
      if (attrs.track !== undefined) { 
       element.bind('click', function() { 
        console.log('Tracking this'); 
       }); 
      } 
      return link.apply(this, arguments); 
     }; 
    }; 
    return $delegate; 
});

來源

2015-12-05 15:24:19 ericluwj

這（不像公認的答案）適用於Angular 1.3。 – xaralis

在AngularJs中修飾ng-click指令

回答

相關問題