AngularJS – 如何覆盖指令ngClick

发布时间：2020-12-17 07:06:22 所属栏目：安全来源：网络整理

导读：我想覆盖指令ng-click：在每次执行ng-click之前对某些进行一些$rootscope的更改.怎么做？解决方法您不能覆盖AngularJS内置指令.但是,您可以使用相同的名称定义多个指令,并针对同一元素执行它们.通过为指令分配适当的优先级,您可以控制指令是在内置指令之前

我想覆盖指令ng-click：在每次执行ng-click之前对某些进行一些$rootscope的更改.怎么做？

解决方法

您不能覆盖AngularJS内置指令.但是,您可以使用相同的名称定义多个指令,并针对同一元素执行它们.通过为指令分配适当的优先级,您可以控制指令是在内置指令之前还是之后运行.

此plunker显示了如何构建在内置ng-click之前执行的ng-click指令.代码也如下所示.单击链接时,将首先运行自定义ng-click,然后执行内置ng-click.

的index.html

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

  <head>
    <script data-require="jquery@1.9.0" data-semver="1.9.0" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.9.0/jquery.js"></script>
    <script data-require="angular.js@1.0.7" 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!')
    }
  })

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!