Updating a controller from another controller Angular

Question

I have two controllers that are active on my page:

// For handling any changes made to the Recipe Window
      ctrl.controller('recipeCtrl', ['$scope', 'view_service', 'recipe_service', function($scope, view_service, recipe_service) {
          $scope.title = recipe_service.get_title();
      }]);

      ctrl.controller('setNameCtrl', ['$scope', 'view_service', 'recipe_service', function($scope, view_service, recipe_service) {
          $scope.titleSet = recipe_service.get_title();
          $scope.setName = function(){
              recipe_service.set_title($scope.titleSet);
              //view_service.set_view_url({url:"partials/typeWindow.tpl.html"});
          };
      }]);

Both controllers are pulling from this service:

serv.service('recipe_service', function(){
    var recipe = {
                        title:"ace",
                        type:"",
                        market:[],
                        attribute:[]
                        };

    return {
        get_title: function() {
            return recipe.title;
        },
        set_title: function(newTitle){
            recipe.title = newTitle;
        }      
    };
});

The second controller updates the "title" that the first controller is referencing. My problem is that once the second controller changes "title" in the service, the first controller is not updated to reflect the changes. What I am thinking that needs to happen is to some how refresh the first controller to pull in those new changes. Any suggestion on how to do so?

shaunhusain · Accepted Answer · 2014-02-18 19:43:37Z

// For handling any changes made to the Recipe Window
  ctrl.controller('recipeCtrl', ['$scope', 'view_service', 'recipe_service', function($scope, view_service, recipe_service) {
      $scope.curRecipe = recipe_service.recipe;
  }]);

  ctrl.controller('setNameCtrl', ['$scope', 'view_service', 'recipe_service', function($scope, view_service, recipe_service) {
      $scope.curRecipe = recipe_service.recipe;
      $scope.setName = function(){
          //view_service.set_view_url({url:"partials/typeWindow.tpl.html"});
      };
  }]);

serv.service('recipe_service', function(){

    return {
        recipe : {
                   title:"ace",
                   type:"",
                   market:[],
                   attribute:[]
                 },
        set_title: function(newTitle){
            recipe.title = newTitle;
        }      
    };
});

Using the same object throughout will work... this object can be defined in the service or you can use

 angular.module("myApp",[]).value("myObject","Shared Value");

then inject this into you controllers like

angular.module("myApp").controller("MyCtrl",function($scope,myObject){console.log(myObject)})

I also posted a plnkr a while back showing some of the options:

http://plnkr.co/edit/ABQsAxz1bNi34ehmPRsF?p=preview

madhured · Accepted Answer · 2014-02-18 20:42:06Z

0

Please find the below plunker

http://plnkr.co/edit/UQgAC8bzcJkmsfCMyP84?p=preview

answered Feb 18, 2014 at 20:42

madhured

4432 silver badges8 bronze badges

Collectives™ on Stack Overflow

Updating a controller from another controller Angular

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related