AngularJS : set parent controller $scope variable from child directive

Question

I have a main controller EventCtrl that sets a formData variable on its scope.

This controller has a setEventObject method that overrides the formData object.

My purpose is to be able to call this method from child directives and apply the new variable value recursively to every scopes.

Here is the controller and its setEventObject function :

app.controller('EventCtrl', function($scope) {
  $scope.formData = {
    id: 1,
    name: 'tennis lesson'
  }
  $scope.events = [
    {id: 1, name: 'tennis lesson'}, 
    {id: 2, name: 'golf lesson'}, 
    {id: 3, name: 'handball lesson'}
  ];

  this.setEventObject = function(eventId) {
    angular.forEach($scope.events, function(elem) {
      if (elem.id == eventId) {
        $scope.formData = {
          id: elem.id,
          name: elem.name
        };
      }
    });
  }
});

Here is the associated Plunkr, on clicks on links, it should set the form input and reset the formData variable.

Thanks for helping !

You should look at using $broadcast and $on, see the docs — caffeinated.tech
– caffeinated.tech, Commented Oct 5, 2014 at 17:34

Siraj · Accepted Answer · 2014-10-05 20:45:31Z

1

You are using element.bind('click' to listen to click. This is jQuery, and these changes are outside angular world. You need to tell angular about your change.

replace eventCtrl.setEventObject(scope.event.id); line with

scope.$apply(function () {
    eventCtrl.setEventObject(scope.event.id);
});

I tried the above change in your plunker and it works as expected.

answered Oct 5, 2014 at 20:45

Siraj

6874 silver badges7 bronze badges

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

Collectives™ on Stack Overflow

AngularJS : set parent controller $scope variable from child directive

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related