web-dev-qa-db-ja.com

AngularJS-ディレクティブng Clickをオーバーライドする方法

私はディレクティブng-click：をオーバーライドしたいのですが、ng-clickを実行する前に$ rootscopeをいくつか変更します。どうやってするの？

angularjsangularjs-directiveangularjs-ng-click
26
Simcha

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

すべてのディレクティブは、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;
    }]);
});

角度は、同じ名前の複数のディレクティブをサポートしているため、独自の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 built-in ng-clickおよびカスタマイズされたngClickを追加します

75
Eric Chen