Question

我对输出字段有几个指令，这些指令会发出语义事件，例如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或类似的单独指令来捕获事件，但我正在寻找标准的东西。

Answer 1

指令可以创建自己的范围，因此不需要控制器作为父级。只需简单地将指令的scope属性定义为空对象，它就可以正常工作。 See this plunk

angular.module('app', [])
.run(['$rootScope', function($rootScope) {
  $rootScope.added = true;
}])
.directive('thing', ['$rootScope', function($rootScope) {
  return {
    link: function(scope, element, attributes) {
      element.attr('added', $rootScope.added);
      console.log($rootScope);
    },
    restrict: 'AE',
    scope: {}
  }
}]);

Answer 2

您可以让所有输入字段中的父directive的名称为outerDir，这将具有editEnded＆amp;的所有控制器。 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
          }
      }
   }
})

角度事件侦听器作为属性

2 个答案: