Call a Directive Controller's method from Parent Controller in AngularJS

Question

I am using AngularJS and I have a directive which has its own Controller. It inherits the scope of the Parent Controller.

As an example, consider the following:

function ParentCtrl() {
    $scope.aMethod = function() {
        // DO SOMETHING
    };
}

function ChildCtrl() {
    $scope.bMethod = function() {
        // DO SOMETHING ELSE
    }
}

Now, $scope.aMethod of ParentCtrl() is triggered by a ng-click directive. What I want to do is call $scope.bMethod of ChildCtrl(). How can I do it?

EDIT: Some more information. The template associated with the ParentCtrl has a button and multiple directives. Each directive loads a form with different sets of inputs. When the button in the ParentCtrl Template is clicked, the directives are loaded one after another by means of ng-switch onand ng-switch-when.
When the user clicks the button, the ChildCtrl which belongs to the directives is meant to store the data in their respective forms.
Thus, when the button is clicked:
1. The ChildCtrl saves the model associated with the current directive that has been loaded.
2. The ParentCtrl loads the next directive in the series.
ng-click is bound to the button which is associated with ParentCtrl. But ChildCtrl also needs to do some action (save the form data) when that button is clicked. How does one accomplish that?

You can't. But a service or a $watch on a parent scope property could accomplish the same thing. Can you provide a skosh more detail on your use case? — Josh David Miller
– Josh David Miller, Commented Mar 1, 2013 at 19:10
@JoshDavidMiller Sure. Edited my question to reflect the same... — callmekatootie
– callmekatootie, Commented Mar 1, 2013 at 19:29
Can you post a super-simple plunker that identifies the core problem space? — Josh David Miller
– Josh David Miller, Commented Mar 1, 2013 at 19:56

T J · Accepted Answer · 2015-11-23 09:25:55Z

9

Please have a look at the following.

I'm using the concept of $broadcast. I have tired to replicate the scenarios you have given like parent controller, child directive with its own controller etc:

var animateAppModule = angular.module('animateApp', [])
animateAppModule.controller('tst', function($scope) {
  $scope.test = function() {
    $scope.$broadcast('clickMessageFromParent', {
      data: "SOME msg to the child"
    })
  }
}).directive('myDirective', function() {
  return {
    controller: function($scope) {

    },
    link: function($scope, element) {
      $scope.$on('clickMessageFromParent', function(scopeDetails, msgFromParent) {
        //console.log(msgFromParent)
        element[0].innerHTML = msgFromParent.data;
      })
    }
  }
})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-controller="tst">
  <input type="button" ng-click="test()" value="click" />
  <div my-directive="somvalue"></div>
</div>

JSFiddle

edited Nov 23, 2015 at 9:25

T J

43.2k13 gold badges87 silver badges142 bronze badges

answered Mar 1, 2013 at 19:42

Rajkamal Subramanian

6,9646 gold badges56 silver badges71 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

callmekatootie Over a year ago

I havent tried this out yet but I see a problem with this. I have multiple directives that will be loaded in sequence, that is, when the button is clicked, a new directive is loaded. If all the directives respond to the clickMessageFromParent event, then it will not be feasible. I want only the current Child controller to respond - will it be so?

Rajkamal Subramanian Over a year ago

Just attach the listener to only the directives you want to listen from the parent..

Shaun Luttin Over a year ago

That works beautifully for calling a directive from a controller.

Pikachu Over a year ago

Is it good idea to call child controller method thru boradcast? Shouldn't we use injections etc?

Ben Lesh · Accepted Answer · 2013-03-01 20:43:41Z

This is similar to what rajkamal is saying, in that you'll need to use broadcast... however you'll want to dynamically change the broadcast to target whichever child you need to.

Here is a plunker showing an example

And here's the code:

app.controller('MainCtrl', function($scope) {

  // a method that broadcasts to a selected child.
  $scope.broadcastToSelectedChild = function (){
    $scope.$broadcast('call-' + $scope.broadcastTo);
  };
});

app.directive('testDir', function (){
  return {
    restrict: 'E',
    scope: {
      'name': '@'
    },
    template: '<div>{{name}} called: {{called}}</div>',
    link: function(scope, elem, attr) {

      scope.called = false;

      //a child function to call.
      scope.childFunction = function (){
        scope.called = true;
      };

      //set up the name to be used as the listened to event.
      var removeOn;
      scope.$watch('name', function(v) {
        if(removeOn) removeOn();
        removeOn = scope.$on('call-' + scope.name, function (){
            scope.childFunction();
          });
      });
    }
  };
});

and here it is in HTML:

  <div ng-controller="MainCtrl">
    <test-dir name="test1"></test-dir>
    <test-dir name="test2"></test-dir>
    <test-dir name="test3"></test-dir>
    <select ng-model="broadcastTo" ng-options="x as x for x in ['test1', 'test2', 'test3']"></select>
    <button ng-click="broadcastToSelectedChild()">test</button>
  </div>

What I did here is create a mechanism by which I can name my directives, and then broadcast to them by name. If the code isn't self explanatory, let me know. I hope this helps.

Collectives™ on Stack Overflow

Call a Directive Controller's method from Parent Controller in AngularJS

2 Answers 2

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related