web-dev-qa-db-fra.com

AngularJS - comment remplacer la directive ng Click

Je veux remplacer la directive ng-click: pour certains, faire quelques changements $ rootscope avant chaque exécution de ng-click. Comment faire?

angularjsangularjs-directiveangularjs-ng-click
26
Simcha

Vous ne pouvez pas remplacer les directives intégrées AngularJS. Cependant, vous pouvez définir plusieurs directives avec le même nom et les exécuter sur le même élément. En affectant priority approprié à votre directive, vous pouvez ensuite contrôler si votre directive s'exécute avant ou après une directive intégrée.

Cette plunker montre comment construire une directive ng-click Qui s'exécute avant le ng-click Intégré. Le code est également indiqué ci-dessous. Lorsque vous cliquez sur le lien, le ng-click Personnalisé s'exécute en premier, puis le ng-click Intégré.

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!')
    }
  })
30
Buu Nguyen

Chaque directive est un service spécial dans AngularJS, vous pouvez remplacer ou modifier n'importe quel service dans AngularJS, y compris la directive

Par exemple, supprimez le ngClick intégré

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;
    }]);
});

prise en charge angulaire de plusieurs directives portant le même nom afin que vous puissiez enregistrer votre propre directive 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');
      });
    }
  }
});

consultez http://plnkr.co/edit/U2nlcA?p=preview J'ai écrit un exemple qui a supprimé angular intégré _ ng-click et ajoutez un ngClick personnalisé

75
Eric Chen