javascript - 作为属性的 Angular 事件监听器

Question

我对输入字段有几个指令，这些指令会发出语义事件，例如 edit-end edit-cancel。有没有一种方法可以使用父元素上的属性来指定如何处理它们，而不是创建 Controller ？有点像

<div on-edit-end="editEnded()" on-edit-cancel="editCanceled()">
  <input edit-directive ng-model="foo"/>
  <input edit-directive ng-model="bar"/>
</div>

(其中 editEnded 和 editCancelled 是在根作用域上定义的)我知道我可以创建一个名为 on-event 或类似指令的单独指令来捕获事件，但我正在寻找标准的东西。

Answer 1

您可以在所有输入字段上使用父 指令 和一些名称为 outerDir 的东西，这将有自己的 Controller ，具有 editEnded & editCanceled 方法公开。通过这种方式，内部指令可以通过在 require 选项前缀中使用 ^(指示父级)提及父指令名称来访问这些方法，例如 require: '^outerDir'

标记

<div outer-dir on-edit-end="editEnded()" on-edit-cancel="editCanceled()">
  <input edit-directive ng-model="foo"/>
  <input edit-directive ng-model="bar"/>
</div>

指令

app.directive('outerDir', function(){
   return { 
      scope: {
          onEditEnd: '&',
          onEditCancel: '&'
      },
      link: function(scope, attr){
      },
      controller: function(scope){
          scope.editEndedEvent = scope.onEditEnd;
          scope.editCancelledEvent = scope.onEditCancel;
      }
   }
})


app.directive('editDirective', function(){
   return { 
      require: '^outerDir', //this line will get controller of `outerDir` directive
      link: function(scope, attr, outerDirController){ //controller is available in 4th parameter
          //on edit call parent directive controller method
          scope.onEdit = function(){
             outerDirController.editEndedEvent(); // call edit
          }
          scope.onCancel = function(){
             outerDirController.editCancelledEvent(); // call cancel
          }
      }
   }
})