AngularJS - 如何覆蓋指令ngClick

我想覆蓋指令ng-click：在每次執行ng-click之前，有些人做一些$ rootcope更改。怎麼做？AngularJS - 如何覆蓋指令ngClick

2013-08-24 Simcha

您不能覆蓋AngularJS內置指令。但是，您可以定義多個具有相同名稱的指令，並使它們針對相同的元素執行。通過爲指令分配合適的priority，您可以控制指令是在內置指令之前還是之後運行。

此plunker顯示瞭如何構建在內置ng-click之前執行的ng-click指令。代碼也顯示在下面。點擊鏈接時，自定義ng-click將先運行，然後內置ng-click。

的index.html

<!DOCTYPE html> 
<html ng-app="app"> 

    <head> 
    <script data-require="[email protected]" data-semver="1.9.0" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.9.0/jquery.js"></script> 
    <script data-require="[email protected]" data-semver="1.0.7" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.js"></script> 
    <script src="script.js"></script> 
    </head> 

    <body ng-controller="MyCtrl"> 
    <a ng-click="alert()">Click me</a> 
    </body> 

</html>

的script.js

angular.module('app', []) 
    .directive('ngClick', function($rootScope) { 
     return { 
     restrict: 'A', 
     priority: 100, // give it higher priority than built-in ng-click 
     link: function(scope, element, attr) { 
      element.bind('click', function() { 
      // do something with $rootScope here, as your question asks for that 
      alert('overridden'); 
      }) 
     } 
     } 
    }) 
    .controller('MyCtrl', function($scope) { 
    $scope.alert = function() { 
     alert('built-in!') 
    } 
    })

來源

2013-08-25 03:37:03

非常感謝詳細的回答） – Simcha

布歐，我們可以完全停止第一次ng-click嗎？我的意思是在運行'重寫'提醒後，'內置'不運行。 –

不要將表達式傳遞給ng-click，請參閱http://plnkr.co/edit/uROkIcGKLspLnVsjmAKn?p=preview。如果你必須通過s/t，那麼不要處理它，例如$ scope.alert = function（）{}。 –

每一個指令是內部AngularJS一個特殊的服務，您可以覆蓋或修改AngularJS任何服務，包括指令

例如刪除內置ngClick

個

angular.module('yourmodule',[]).config(function($provide){ 
    $provide.decorator('ngClickDirective', ['$delegate', function($delegate) { 
     //$delegate is array of all ng-click directive 
     //in this case first one is angular buildin ng-click 
     //so we remove it. 
     $delegate.shift(); 
     return $delegate; 
    }]); 
});

角度支持多種指令相同的名稱，以便您可以註冊您自己ngClick指令

angular.module('yourmodule',[]).directive('ngClick',function(){ 
    return { 
    restrict : 'A', 
    replace : false, 
    link : function(scope,el,attrs){ 
     el.bind('click',function(e){ 
     alert('do you feeling lucky'); 
     }); 
    } 
    } 
});

退房http://plnkr.co/edit/U2nlcA?p=preview 我寫了取出的樣品角內置ng-click並添加自定義ngClick

來源

2014-04-22 02:53:39

這對我非常有幫助！謝謝。 –

你將如何保持這兩個委託，但讓第一個處理程序有條件地傳播到內置委託？ –

@AlexWhite我的猜測是，這是不可能的，因爲'click'綁定已經在另一個函數回調中用'element.bind'完成了：https：//github.com/angular/angular.js/blob/master/src/ ng/directive/ngEventDirs.js #L62 – saiyancoder

AngularJS - 如何覆蓋指令ngClick

回答

相關問題