24
Tôi muốn ghi đè chỉ thị ng-click: một số thực hiện một số thay đổi $ rootscope trước mỗi lần thực hiện ng-click. Làm thế nào để làm nó?AngularJS - cách ghi đè chỉ thị ngClick
A
Trả lời
28
Bạn không thể ghi đè chỉ thị tích hợp AngularJS. Tuy nhiên, bạn có thể xác định nhiều chỉ thị có cùng tên và yêu cầu chúng được thực thi dựa trên cùng một phần tử. Bằng cách chỉ định priority phù hợp với chỉ thị của bạn, bạn có thể kiểm soát liệu chỉ thị của bạn có chạy trước hoặc sau chỉ thị tích hợp hay không.
Điều này plunker cho biết cách tạo chỉ thị ng-click thực hiện trước khi được xây dựng trong ng-click. Mã này cũng được hiển thị bên dưới. Khi nhấp vào liên kết, tùy chỉnh ng-click sẽ chạy trước tiên, sau đó tích hợp sẵn 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!')
}
})
71
Mỗi chỉ là một dịch vụ đặc biệt bên trong AngularJS, bạn có thể ghi đè lên hoặc sửa đổi bất kỳ dịch vụ trong AngularJS, trong đó có chỉ thị
Ví dụ: loại bỏ được xây dựng trong 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;
}]);
});
hỗ trợ góc nhiều chỉ thị để cùng tên, do đó bạn có thể đăng ký bạn sở hữu ngClick Chỉ
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');
});
}
}
});
séc ra http://plnkr.co/edit/U2nlcA?p=preview Tôi đã viết một mẫu mà loại bỏ góc built-in ng-click và thêm một tùy chỉnh ngClick
+0
Điều này vô cùng hữu ích đối với tôi! Cảm ơn. –
+1
Làm thế nào để bạn giữ cho cả hai đại biểu nhưng để cho người xử lý đầu tiên có điều kiện tuyên truyền cho người được ủy quyền tích hợp? –
+0
@AlexWhite đoán của tôi là không thể thực hiện được vì liên kết 'click' đang được thực hiện với' element.bind' bên trong một hàm gọi lại khác đã có: https://github.com/angular/angular.js/blob/master/src/ ng/directive/ngEventDirs.js # L62 – saiyancoder
Cảm ơn rất nhiều vì phản hồi chi tiết) – Simcha
Buu, chúng ta có thể ngừng hoàn toàn việc ng-nhấp chuột đầu tiên không? tôi có nghĩa là sau khi chạy cảnh báo 'ghi đè', 'được tích hợp sẵn' không chạy. –
Không chuyển biểu thức cho ng-click, xem http://plnkr.co/edit/uROkIcGKLspLnVsjmAKn?p=preview. Nếu bạn phải vượt qua s/t, thì đừng xử lý nó, ví dụ: $ scope.alert = function() {}. –