角事件侦听器作为属性

IttayD 发表于 Dev

IttayD

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

<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或类似名称来捕获事件，但是我正在寻找某种标准的东西。

潘卡·帕克（Pankaj Parkar）

您可能在所有输入字段中都directive使用了一个带有某些名称的父对象outerDir，这将拥有自己的控制器并公开了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
          }
      }
   }
})

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。