AngularJS – come sostituire la direttiva ngClick

Voglio ignorare la direttiva ng-click: per alcuni fare qualche $rootscope modifiche prima di ogni esecuzione di ng-fare clic su. Come fare?

InformationsquelleAutor Simcha | 2013-08-24

 

2 Replies
  1. 30

    Non è possibile sostituire AngularJS built-in direttive. Tuttavia, è possibile definire più direttive con lo stesso nome e li hanno eseguiti a fronte di uno stesso elemento. Mediante l’assegnazione di adeguate priority al tuo direttiva, è possibile controllare se il vostro direttiva viene eseguito prima o dopo un built-in direttiva.

    Questo plunker mostra come costruire un ng-click direttiva che viene eseguito prima che il built-in ng-click fa. Il codice è riportato qui di seguito. Quando si fa clic sul collegamento, il custom ng-click verrà eseguito per primo, poi il built-in ng-click fa.

    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!')
        }
      })
    • Grazie mille per la risposta dettagliata)
    • Bu, possiamo interrompere il primo ng clic totalmente? voglio dire, dopo l’esecuzione di ‘override’ avviso ‘built-in’ per l’esecuzione.
    • Non passa un’espressione di ng clic, vedere plnkr.co/modifica/uROkIcGKLspLnVsjmAKn?p=anteprima. Se devi passare a s/t, quindi non usarla, ad esempio $scope.avviso = function() {}.
    • questa non è la risposta corretta, checkout Eric Chen, uno sotto!
    • D’accordo con JackNova, questa risposta non è corretta. * è POSSIBILE eseguire l’override/sostituire tutte le direttive di @eric-chen mostra sotto * questo esempio di approccio dei problemi – non sono più direttive sullo stesso elemento con la richiesta di una isolare il campo di applicazione o impostazione di un modello. Eric approccio risolve anche questo
  2. 75

    Ogni direttiva è un servizio speciale all’interno di AngularJS, è possibile sovrascrivere o modificare qualsiasi servizio in AngularJS, tra cui la direttiva

    Per esempio rimuovere built-in 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;
        }]);
    });

    angolare di supporto più direttive per lo stesso nome in modo da poter registrare il proprio ngClick Direttiva

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

    check out http://plnkr.co/edit/U2nlcA?p=preview
    Ho scritto un campione che ha rimosso angolare built-in ng-click e aggiungere un personalizzato ngClick

    • Questo è stato molto utile per me! Grazie.
    • Come mantenere le due delegati, ma lasciare che il primo gestore in modo condizionale propagare il delegato?
    • la mia ipotesi è che è impossibile, poiché il click associazione è stato fatto con element.bind all’interno di un’altra funzione di callback già: github.com/angular/angular.js/blob/master/src/ng/directive/…
    • la soluzione più semplice è quello di simulare questo comportamento facendo una copia del ngClick gestore di eventi e $analizzare uso di direttiva e di chiamata in modo condizionale dal vostro gestore di eventi.
    • Ben fatto! Questo dovrebbe essere contrassegnato come risposta.

Lascia un commento