Я хочу переопределить директиву ng-click: некоторые из них вносят некоторые изменения в корнеплоды перед каждым выполнением ng-click. Как это сделать?
AngularJS - как переопределить директиву ngClick
Ответ 1
Вы не можете переопределять встроенные директивы 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!')
}
})
Ответ 2
Каждая директива является специальной службой внутри 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;
}]);
});
angular поддерживает несколько директив с тем же именем, чтобы вы могли зарегистрировать свою собственную директиву 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
Я написал образец, который удалил angular встроенный ng-click
и добавил настроенный ngClick