Angular directive to directive communication?

Question

Actually all I need is somewhere to put a reusable function that has access to $scope.

Here's an attempt at a simplified example of what I'm trying to do: Plnkr

I'm still getting the hang of directives.

var app = angular.module('plunker', []);

app.directive('dir1', function() {
    return {
        restrict: 'AE',
        link: function(scope, element, attrs) {
            element.click(function() {
                scope.message = "Hey Now";
                scope.doSomething();
            });
        }
    };
});

app.directive('dir2', function() {
    return {
        restrict: 'AE',
        link: function(scope, elem, attr) {
            scope.doSomething = function() {
                alert($scope.message);
            }
        }
    };
});

and:

<html ng-app="plunker" >
<head>
  <meta charset="utf-8">
  <title>AngularJS Plunker</title>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.js"></script>
  <script src="app.js"></script>
</head>
<body>
  <dir1>click me</dir1>
</body>
</html>

Possible duplicate: http://stackoverflow.com/questions/24778496/how-to-communicate-from-one-directive-to-another-directive/24779404#24779404 — akn, Aug 15 '14 at 22:47
You never use dir2 anywhere. What are you trying to achieve exactly? — JB Nizet, Aug 15 '14 at 22:48
I just want a reusable function that alters the DOM and has access to $scope @JBNizet — jthomasbailey, Aug 15 '14 at 22:52
reusable by what? If only one directive dir1 uses it, put it in the dir1 directive. If it's actually used by several ones, put it in a service that takes the scope as argument. — JB Nizet, Aug 15 '14 at 22:54
A service would be great but it also has to compile html: $compile(canvas)($scope); $scope.$apply(); I need to do more than just pass arguments to it. @JBNizet — jthomasbailey, Aug 15 '14 at 23:03
So, inject the $compile service into your service, and use it. Where's the problem? — JB Nizet, Aug 15 '14 at 23:12
It still needs $scope.$apply(); and a few other tricks, adding and subtracting things from the $scope. I was never able to get a Service to recognize $scope. — jthomasbailey, Aug 15 '14 at 23:34
@jthomasbailey that's why I tld you to pass the scope as argument from the directive: `myService.doSomething($scope);` — JB Nizet, Aug 16 '14 at 06:38
Thanks, I gave it a try but I don't think it's possible that way: http://stackoverflow.com/questions/19747830/how-do-i-pass-scope-from-controller-to-service-in-angularjs — jthomasbailey, Aug 16 '14 at 22:26

score 1 · Answer 1 · answered Aug 16 '14 at 02:21

1

You can use require parameter of directive in order to communicate to another directive. Here is an example:

 var app = angular.module('plunker', []);

app.directive('dir1', function(){
return {
  restrict: 'AE',
  require:'dir2',
  link: function(scope, element, attrs, dir2) {

         element.bind('click', function() {

           dir2.message = "Hey Now";
           alert(JSON.stringify(dir2))
           dir2.doSomething();

         });

  }
};
});

app.directive('dir2', function(){
return {
  restrict: 'AE',
  controller : function ($scope) {
     this.doSomething = function(){
       alert(this.message);
     }

  }

};
});

answered Aug 16 '14 at 02:21

vittore

17,449
6
44
82

The problem there is since there's no html element named 'dir2' it gives the error: "$compile:ctreq Missing Required Controller - Controller 'dir2', required by directive 'dir1', can't be found!" And adding '^?' to the 'require' parameter causes it to not recognize the 'dir1' function. – jthomasbailey Aug 16 '14 at 21:40
@jthomasbailey do you really need two different directives? seems that you can deal with one and use another one just to pass parameters from parent scope – vittore Aug 17 '14 at 21:18
I may be able to carve up the second directive into a service and several functions that I can put in a controller where they have access to $scope, I'm not looking forward to it though. I can't believe Angular is giving me so much trouble over something so simple. – jthomasbailey Aug 18 '14 at 14:07

Angular directive to directive communication?

1 Answers1