27

ディレクティブ ng-click: をオーバーライドして、ng-click を実行する前に $rootscope を変更する人もいます。どうやってするの？

4

2 に答える 2

32

AngularJS の組み込みディレクティブをオーバーライドすることはできません。ただし、同じ名前の複数のディレクティブを定義して、それらを同じ要素に対して実行することはできます。ディレクティブに適切なものを割り当てることによりpriority、ディレクティブが組み込みディレクティブの前または後に実行されるかどうかを制御できます。

このplunkerng-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!')
    }
  })
于 2013-08-25T03:37:03.957 に答える