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

问题描述

我有一段代码，它允许用户对项目列表发表评论.我创建了一个指令并监听 keydown 以便让用户在 keyCode == 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.

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

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?

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

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.

推荐答案

你通常不希望你的指令知道关于你的控制器的任何信息，所以控制器和指令之间最好的(Angular)通信方式是通过双向绑定.

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.

在你的情况下，我认为最好的做法是为按钮创建一个指令——而不是输入.您会告诉按钮要监视哪个输入"(通过 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=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();
                    }
                });
            });
        }
    };
});

这可能会很棘手，因为每次控制器的 scope.items 更改时都会触发 $observe 回调，因此您需要以某种方式解除绑定和重新绑定(我知道您正在使用 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=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();
      }
    });
  }
});

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