控制器和指令之间的角度通信

时间:2013-05-08 19:45:11

标签: angularjs communication angularjs-directive keydown angularjs-controller

我有这段代码,允许用户在项目列表上留下评论。 我创建了一个指令并听取了keydown,以便让用户在keyCode == 13时提交评论。

不确定是否应该包含在指令中发布评论的代码。在控制器和指令之间进行通信的最佳方式是什么?

在提交评论之前,我还会检查输入是否为空。它有效,但不确定这是Angular的最佳实践吗?

这是我的plunker

3 个答案:

答案 0 :(得分:4)

如果你想使用ng-keydown ..

,你不需要编写指令

例如:

模板:

<input type="text" ng-model="myText" ng-keydown="checkKeyCode($event)">

控制器: - 用coffeescript

编写
$scope.checkKeyCode = ($event)->
  if $event.keyCode == 13 and $scope.myText?
    $scope.doSomething()

答案 1 :(得分:3)

您通常不希望您的指令知道控制器的任何信息,因此控制器和指令之间通信的最佳(Angular)方式是通过双向绑定。

在你的情况下,我认为IMO的最佳实践是为按钮创建一个指令 - 而不是输入。你告诉按钮“输入”(通过id)进行监控。类似的东西:

<input id="input-{{item.id}}" type="text" ng-model="currMessage" />
<button class="btnMessage" ng-click="addMessage(currMessage, item)" default-input="input-{{item.id}}">Add</button>

ETA:这是指令最终看起来像

http://plnkr.co/edit/HhEAUUq0IZvzblbRksBH?p=preview

myApp.directive('defaultInput', function () {
    return {
        restrict:'A',
        link: function(scope, element, attrs) {
            attrs.$observe('defaultInput', function(value) {
                var inputElement = angular.element(document).find('#' + value);
                inputElement.bind('keydown', function(e) {
                    if (e.keyCode == 13) {
                        element.click();
                    }
                });
            });
        }
    };
});

它可能会变得棘手,因为$observe回调会在每次控制器的scope.items发生变化时触发,所以你需要以某种方式取消绑定并重新绑定(我知道你正在使用jQuery,但我'我没有在文档中看到angular.unbind

另一种选择,如果你想更接近原来的方法:

http://plnkr.co/edit/3X3usJJpaCccRTtJeYPF?p=preview

HTML

<input id="input-{{item.id}}" type="text" ng-model="currMessage" enter-fires-next-button />

的JavaScript

myApp.directive('enterFiresNextButton', function() {
  return function(scope, element, attrs){
    element.on('keydown', function(e){
      if(e.keyCode == 13) {
        element.next('button').click();
      }
    });
  }
});

答案 2 :(得分:1)

  

在控制器和指令之间进行通信的最佳方式是什么?

这取决于......我想首先确定哪种类型的范围适合于指令:没有新范围,新范围或新的隔离范围。见When writing a directive in AngularJS, how do I decide if I need no new scope, a new child scope, or a new isolated scope?

一旦决定了,下一个决定是确定通信是否真的要去服务。如果是这样,控制器和指令都将注入服务并与之交互,而不是彼此交互。

如果不需要服务,则使用属性来促进控制器与指令之间的通信。如何完成取决于指令创建的范围类型。提示:如果未使用隔离范围,请使用$parse来获取和设置指令内的属性,或者从指令内部调用控制器上的方法 - 请参阅