Angular communication between controllers and directives

你说的曾经没有我的故事 提交于 2019-12-02 00:05:57

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.

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

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

you don't need to write a directive, if you want to use ng-keydown..

example:

template:

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

controller: -- written in coffeescript

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

What is the best way to communicate between controllers and directives?

It depends... I like to first determine which type of scope is appropriate for a directive: no new scope, new scope, or new isolate scope. See 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?

Once that has been decided, the next decision is to determine if the communication should really be going to a service. If so, the controller and directive would both inject the service and interact with it, rather than each other.

If a service is not required, attributes are used to facilitate the communication between the controller and the directive. How that is done is determined by the type of scope the directive creates. Tip: if an isolate scope is not used, use $parse to get and set properties inside the directive, or to call methods on the controller from inside the directive -- see

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!