角度事件监听器作为属性

我有几个指令输入字段发出语义事件，如edit-endedit-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或类似的东西，搭上事件独立的指令，而是在寻找东西的标准。

来源

2015-11-01 IttayD

所以你真正的问题是'editEnded'和'editCanceled'是'$ rootScope'上的方法吗？ –

你可以有父directive一些东西的名称作为outerDir在所有领域的投入，这将有自己的控制器具有editEnded & editCanceled方法暴露。通过内部指令可以通过像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 
      } 
     } 
    } 
})

与 ^（表示父）提内 require选择前缀父指令名可以访问那些方法

来源

2015-11-01 20:13:31

好吧，我不想创建一个控制器。指令只是创建控制器的另一种方式。 – IttayD

@IttayD我认为这将是正确的方式来处理'指令的指令'通信..不要认为创建指令与控制器作为开销，因为它可以有'可共享的方法来共享这些与它的基本指令.. –

指令可以创建自己的范围，因此不需要控制器作为父级。只需简单地将你的指令的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: {} 
    } 
}]);

来源

2015-11-01 20:10:40

角度事件监听器作为属性

回答

相关问题