0

When I require a controller in a directive, I am getting error saying that, not able to find the controller. Please see the code with the issue below. http://plnkr.co/edit/NzmQPA?p=preview

Can someone please have a look at it?

Thanks

2
  • 1
    You can only require controller if they have parent-child relationship. See updated plunk plnkr.co/edit/iLfc3a?p=preview Commented Feb 21, 2014 at 13:55
  • @KhanhTO: Thanks for that. So, if I want a communication between two sibling directives, how can I do that? Commented Feb 21, 2014 at 16:07

2 Answers 2

1

You should use a service to communicate between them. Exactly how/what you do depends on your exact needs (there's not enough info in your post).

Side note, I changed your click handler to an ng-click.

Here's an example: http://plnkr.co/edit/I2TvvV?p=preview

<div search-result-filter></div>
<div search-result-header ng-click="doClick()"></div>

angular.module('mymodule', [])
  .controller('mainCtrl', ['$scope',
    function($scope) {
      $scope.test = "main angular is working";
    }
  ]).controller('searchResultFilterController', ['$scope', 'myService',
    function($scope, myService) {
      //do something with 'myService'
    }
  ])
  .directive('searchResultFilter', [
    function() {
      return {
        replace: true,
        controller: 'searchResultFilterController',
        template: '<h1>this is the first directive</h1>'
      };
    }
  ])
  .directive('searchResultHeader', ['myService',
    function(myService) {
      return {
        replace: true,
        template: '<button>clickme</button>',
        link: function($scope, $elem, $attrs) {
          $scope.doClick = function() {
            myService.someFn();
          };
        }
      };
    }
  ])
  .service('myService', function() {
      this.someFn = function() {
        alert('this is working');
      };
  });
Sign up to request clarification or add additional context in comments.

3 Comments

Thanks for the answer. When we use like this, we are just using service as a middle man right? I want a two way communication between these directives. So, if one button is clicked on directive1, some action should happen on directive2 and vice versa. So, if we are using a service, how do we do that?
Just saw your comment. Again, it depends on exactly what you're doing. Say you want directive1 (D1) to make a change to some value that directive2 (D2) picks up. One example, would be to have D1 call a function on the service to change some value, while D2 has a $watch set on one of the service's properties. Check out this blog post on using the 3 variations of $watch. bennadel.com/blog/… You could use the same method to have D2 call a function when the value is changed on the service.
Here is an updated plunker with an example using an array. plnkr.co/edit/I2TvvV
1

You should use require when your directives are related: like an accordion and accordion items.

To communicate between scopes, you should try $on, $emit, $broadcast. In your case, you need to inject rootScope into your directive, and broadcast an event from rootScope:

.directive('searchResultHeader', 

    function($rootScope) { //inject rootScope
      return {
        replace: true,
        template: '<button>clickme</button>',
        link: function($scope, $elem, $attrs) {
          $elem.on('click', function() {
            $rootScope.$broadcast("someEvent"); //broadcast an event to all child scopes.
          });
        }
      };
    }
  );

Any scopes interested in the event can subscribe to it using $on:

function($scope) {
      $scope.$on("someEvent", function() { 
          alert('this is working');
      });
    }

Using events is a way to create decoupled systems.

DEMO

6 Comments

Yes. we can use like this. But, is this a good approach? I think, angular is not suggesting to use broadcast or emit too much, right?
@jintoppy: There are 2 solutions to this problem: using events and using services. Which to use depends on our application. We use services when we have some shared properties between scopes => when another scope modifies these shared properties, all the other scopes notice the changes. In other cases, we use events. I don't think angular is not suggesting to use broadcast or emit too much, it should depend on the context.
@jintoppy: If your directives don't have anything to shared. I would go with using events to create a more decoupled system.
I personally use events very sparingly and only in very specific situations. For example, the only event used in the application I'm currently working on is to notify the rest of the application that there has been a configuration change, so each interested piece can update its own configuration.
@Craig Squire: in fact, event-driven is very useful. It's a way to create decoupled systems as you components do not have to directly depend on other components.
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.