控制器和指令之间的沟通角 [英] Angular communication between controllers and directives

问题描述

我有这块code的允许用户留下的项目清单上的意见。
我创建了一个指令，听，以让用户提交了评论的keydown如果键code == 13 。

I have this piece of code which allows a user to leave comments on a list of items. I created a directive and listen to keydown in order to let the user submit a comment if keyCode == 13.

不知道我是否应该包括code发布的指令中的注释。什么是控制器和指令之间沟通的最佳方式？

Not sure if I should include the code to post a comment within the directive. What is the best way to communicate between controllers and directives?

我也检查输入是否提交评论之前空。它的工作原理，但不知道这是角最佳做法？

I also check whether or not the input is empty before submitting the comment. It works but not sure this is Angular best practice?

下面是我的 plunker 。

推荐答案

您一般不希望你知道的指示你的控制器，因此控制器和指令之间沟通的最佳（角）的方式是什么，通过双向绑定

You generally don't want your directives knowing anything about your controller, so the best(Angular) way of communicating between controllers and directives is through bi-directional bindings.

在你的情况，我认为最好的做法，再次IMO，将创建按钮的指令 - 而不是输入。你会告诉按钮输入（由ID）要监视的。是这样的：

In your situation, I think best practice, again IMO, would be to create a directive for the button -- not the input. You'd tell the button which "input" (by id) to monitor. Something like:

<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：这里是指令最终会看起来像

ETA: Here's what the directive would end up looking like

http://plnkr.co/edit/HhEAUUq0IZvzblbRksBH?p=$p$ PVIEW

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();
                    }
                });
            });
        }
    };
});

这可能变得棘手，因为 $观察的回调将触发您的每一次控制器 scope.items 的变化，使你需要以某种方式解除和重新绑定（我知道你在使用jQuery，但我不 angular.unbind 在文档中看到）。

It could get tricky because the $observe callback will fire every time your controller's scope.items changes, so you'd need to somehow unbind and rebind (I know you're using jQuery, but I'm not seeing angular.unbind in the docs).

另一种选择，如果你想坚持更接近你原来的做法：

Another option, if you wanted to stick closer to your original approach:

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

HTML

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

JavaScript的

JavaScript

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

这篇关于控制器和指令之间的沟通角的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！