Angular communication between controllers and directives

Question

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?

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

Here is my plunker.

Answer 1

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

Answer 2

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

Answer 3

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

• How to set angular controller object property value from directive in child scope
• https://stackoverflow.com/a/12932075/215945 - an example of calling a controller function with arguments