控制器和指令之间的Angular通信

Question

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

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

在提交评论之前，我还检查输入是否为空。它可以工作，但不确定这是Angular的最佳实践?

这是我的活塞

Answer 1

你不需要写指令，如果你想使用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()

Answer 2

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

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

预览

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 =

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

Answer 3

控制器和指令之间最好的通信方式是什么?

这取决于……我喜欢首先确定哪种类型的作用域适合于一个指令:没有新作用域、新作用域还是新的隔离作用域。参见在AngularJS中编写指令时，如何决定是否不需要新的作用域、新的子作用域还是新的隔离作用域?

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

如果不需要服务，则使用属性来方便控制器和指令之间的通信。如何完成是由指令创建的作用域类型决定的。提示:如果没有使用隔离作用域，使用$parse在指令内部获取和设置属性，或者从指令内部调用控制器上的方法——参见

• 如何从子作用域的指令中设置角控制器对象的属性值
• https://stackoverflow.com/a/12932075/215945 -一个使用参数
调用控制器函数的例子