Question

我有一个指令附加到表单元素和嵌套在表单元素的不同子作用域内的各种ng-click事件（例如ng-if，ng-repeat）。

我希望form指令能够监视和拦截任何ng-click，但似乎无法以通用方式挂钩事件或子作用域属性。

演示：http://plnkr.co/edit/6WdIo5r2FtYWPExBGUru

HTML

<body ng-controller="MainCtrl">
    <form my-form-directive>
      <div ng-controller="SubCtrl">
        <a ng-click="changeName()">click me</a>
      </div>
    </form>
  </body>

的javascript

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {

});

app.controller('SubCtrl', function($scope) {
  $scope.name = 'John';

  $scope.changeName = function() {
    $scope.name = 'Peter';
  }
});

app.directive('myFormDirective', 
    function() {
      return {
        link: function($scope, element, attrs, controller) {
          // would like to watch for either ng-click or $scope.name
          // change and print 'Peter' to the console.log
          // don't assume we know nested location of element with
          // ng-click attached (ok to catch all form ng-click events)
        }
      };
    }
  );

任何帮助将不胜感激，感谢。

Answer 1

你需要做一些事情来完成这项工作

首先，我添加了jQuery以使用find函数。

接下来，我们需要在SubCtrl控制器中移动指令。

<强> HTML

<body ng-controller="MainCtrl">
  <div ng-controller="SubCtrl">
    <form my-form-directive name="name">
      <a ng-click="changeName()">click me</a>
    </form>
  </div>
</body>

将范围参数name添加到指令

<强> HTML

 <form my-form-directive name="name">

<强> JS

 scope: { name: '=' },

最后，在指令中，使用ng-click收听所有元素，并在点击时触发click事件。

<强> JS

element.find('[ng-click]').on('click', function(){
  console.log($scope.name);
});

示例：http://plnkr.co/edit/7lVWjjT2mssmcBD7uP1Z?p=preview

如果您需要纯角度解决方案，可以将指针添加到指令$scope.name

<强> JS

$scope.$watch(
  function(){ return $scope.name; }, 
  function(){ console.log($scope.name); }
);

示例：http://plnkr.co/edit/JG21UvdfBfDoMkCRWKqD?p=preview

Angular catch子范围ng-click或属性更改

1 个答案: