AngularJS: how to update a directive from another controller

Question

Well, I'm having some problems updating a progress bar (which is in a directive) from a controller.

here are some code snippets: my directive:

angular.module('TestApp').directive('orderProgress', ['$window', OrderProgress]);

  function OrderProgress($window) {

    var directive = {
      link: link,
      restrict: 'A',
      templateUrl: 'OrderProgress.html',
      controller: 'ProgressController',
      replace: true
    };
    return directive;

    function link(scope, element, attrs) {}
  }

controller for directive:

function ProgressController($scope, progressNumberService) {
    $scope.progress = progressNumberService.getProgress();
  }

progressNumberService just hides the detail for the amount of "progress":

var progress = 20;
  var progressServiceInstance = {
    incProgress: function() {
      progress += 20;
    },
    decProgress: function() {
      progress -= 20;
    },
    getProgress: function() {
      return progress;
    }
  };

  App.value('progressNumberService', progressServiceInstance);

of course the controller:

function Controller($scope, progressNumberService) {
    $scope.nextStep = function() {
      progressNumberService.incProgress();
    };

    $scope.prevStep = function() {
      progressNumberService.decProgress();
    };
  }

I've created an example: http://plnkr.co/edit/LtY4ZUG591Kd3mUKEmEF?p=catalogue

So why doesn't the directive get the update from the 'Controller', when the Next/Prev buttons are pressed?

Zack Argyle · Accepted Answer · 2014-03-03 00:08:34Z

1

So your issue is that the value is being updated in your .value module, but your directive controller is never calling getProgress once the values are updated. I would suggest using $broadcast and $on to send a message saying that the progress was updated. I tested this and it seemed to do the trick.

Controller:

angular.module('TestApp').controller(controllerId2, ['$scope', '$rootScope', 'progressNumberService', ProgressController]);

function ProgressController($scope, $rootScope, progressNumberService) {
  $scope.progress = progressNumberService.getProgress();

  $rootScope.$on("event:progress-change", function() {
    $scope.progress = progressNumberService.getProgress();
  });
}

And change your .value to a factory so you can use $rootScope to broadcast

App.factory('progressNumberService', function($rootScope) {
  return {
    incProgress: function() {
      progress += 20;
      $rootScope.$broadcast("event:progress-change");
    },
    decProgress: function() {
      progress -= 20;
      $rootScope.$broadcast("event:progress-change");
    },
    getProgress: function() {
      return progress;
    } 
  }
});

Here is the updated Plunker DEMO

answered Mar 3, 2014 at 0:08

Zack Argyle

8,4674 gold badges32 silver badges38 bronze badges

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

1 Comment

sanjosep43 Over a year ago

Thanks. That did work. My angular knowledge is not at that level (yet).

Collectives™ on Stack Overflow

AngularJS: how to update a directive from another controller

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related