How to set a $scope variable from inside another scope variable

Question

I have the following code, and I am trying to set the value of a $scope variable after a promise (in this case an $http request) is finished. The code looks like this:

.controller('NewItemCtrl', function ($scope, $state, LabelFactory) {

  $scope.createItem = function (item) {
    LabelFactory.createLabel(item)
      .then(function (response) {
        $scope.label = response.data;
        $scope.thing = 'These are things';
        $state.go('tab.newitem-label');
        console.log($scope.label);  
      });  
  };
})

And it looks like it should work but it doesn't. Even though I am able to log $scope.label correctly, when I look for that item in my template (for which NewItemCtrl is the controller), nothing is there. It is as if I never sent it at all, even though it obviously has a value.

Can someone explain to me how to either A. Set the value of$scope property from inside another scope,or B. the best practice to achieve the same thing?

github.com/angular/angular.js/wiki/Understanding-Scopes check this link which is great article about how scope is working... — Poyraz Yilmaz
– Poyraz Yilmaz, Commented Feb 16, 2015 at 9:37
write console.log($scope.label); then $state.go('tab.newitem-label'); because you are redirecting. — ramamoorthy_villi
– ramamoorthy_villi, Commented Feb 16, 2015 at 9:41
@ramamoorthy_villi the console.log part is not what is important - setting the $scope value for use elsewhere in the app is. — Startec
– Startec, Commented Feb 16, 2015 at 9:43
@Startec if you change state controller start again which means old values is gone. if you want to pass parameters between controllers use services which are singletons — Poyraz Yilmaz
– Poyraz Yilmaz, Commented Feb 16, 2015 at 9:44

cubbuk · Accepted Answer · 2015-02-16 09:58:45Z

1

This is happening because you are going to another state which recreates the scope object.

One way to achieve this is to use a hierarchical state. A child scope can access scope of its parent state. Since you are going to 'tab.newitem-label', if you are at state 'tab' before going to this new state, setting label in scope of tab state will be enough to access it from tab.newitem.

I believe you are using ui-router. Then you might make this label part of existing state. The parameterized value can be accessed through $stateParams. So instead of moving to $state.go('tab.newitem-label');, you might pass your parameter to new state using the following syntax: $state.go('tab.newitem-label', {labelId: labelId}); Then you can access labelId parameter using $stateParams.labelId in your controller and before creating your controller you can retrieve the label using labelId by resolve feature of state. Resolve feature helps you retrieve date before instantiating your controller. You can then inject the resolved data to your controller similar to injecting service to your controller.

This is how you might define such a state:

.state('tab.newitem-label', {
        url: '/:labelId',
        templateUrl: 'partials/yourpage.html',
        controller: 'NewStateCtrl'
        resolve: {
          label: ['labelService', '$stateParams', function (labelService, $stateParams) {
            return labelService.retrieveLabelFromLabelId($stateParams.labelId);
          }]
        }
      })

answered Feb 16, 2015 at 9:58

cubbuk

7,9284 gold badges39 silver badges64 bronze badges

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

1 Comment

Startec Over a year ago

This seems like the best way. I am new to ui-router (you are right, I am using that), so thanks for this guidance.

Divya MV · Accepted Answer · 2015-02-16 09:51:17Z

0

you can put a watch over the {$scope.label} and see if the new value update is triggering the watch function to executes.once you confirm the update is triggering the watch ,use the function to update all the places/controllers where {$scope.label} is been used probably using a $emit/$broadcast

answered Feb 16, 2015 at 9:51

Divya MV

2,0514 gold badges34 silver badges59 bronze badges

Collectives™ on Stack Overflow

How to set a $scope variable from inside another scope variable

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related