Angular JS script not updating view

Question

Assuming this is fairly simple fix and something that I've completely missed on my part..

I basically have a button where when the user clicks on it, it will go to a new state using ui-router. Immediately following the state change, a value from the script will cause the empty value of a simple paragraph tag to populate with a value I've set in the $scope in the script.

This isn't working, please see below example:

Script

app.controller('myCtrl', ['$scope', 'Auth', '$state', '$timeout',  
function($scope, Auth, $state, $timeout) {

$scope.buttonClick = function () {
    $state.go('newState');
    $timeout(function () {
        $scope.newValue = 'Hello';
    }, 1000);
};

}]);

HTML

<p>{{newValue}}</p>

Now, I've tried various combinations already and have noticed that by taking the line '$scope.newValue = 'Hello';' and placing this outside the button click function will cause it to work fine. Yet, I am creating an application where there will be further button click events that each change the same value to a specific value that is applicable to the button click event.

Are you trying to access the value of $scope.newValue in newState? — Aniket Sinha
– Aniket Sinha, Commented Mar 18, 2016 at 9:23
That's right, quite simple really. I've even managed to get it to work in my code elsewhere, but not for this? — Richard Ansell
– Richard Ansell, Commented Mar 18, 2016 at 9:24

aup · Accepted Answer · 2016-03-18 09:29:14Z

2

When you're doing $state.go('newState') your navigating to another view, and thus loosing the current $scope you're in when trying to set $scope.newValue = 'Hello';

You need to set $scope.newValue = 'Hello'; in the "newSate-controller" for the view you're navigating to.

answered Mar 18, 2016 at 9:29

aup

8107 silver badges19 bronze badges

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

6 Comments

Richard Ansell Over a year ago

Similar to below, what would be the recommended fix for this? Sorry, I've only recently got my head around Angular and still getting to grips with it

Richard Ansell Over a year ago

Okay I think I know where I've gone wrong now after all. I'm trying to limit the number of controllers I've got by getting all of the to work in the one controller. Whereas I should really be using more than one controller to achieve what I need - is this where I've gone wrong then I assume?

aup Over a year ago

That's exactly right. I usually use 1 controller for 1 view, if the view isn't partial and i use ng-include.

Richard Ansell Over a year ago

Okay, well I've got three button click events so will now need three controllers then. I guess some things you can't avoid in limiting the amount code

Aniket Sinha Over a year ago

Well technically, if you are going to a child state, you can still access parent's scope in the child sate. But that's a completely different story.

|

Coder John · Accepted Answer · 2016-03-18 09:32:18Z

2

app.controller('myCtrl', ['$scope', 'Auth', '$state', '$timeout',  
function($scope, Auth, $state, $timeout) {
$scope.newValue = '';
$scope.buttonClick = function () {
    $timeout(function () {
        $scope.newValue = 'Hello';
    }, 1000);
};

}]);

This should work

answered Mar 18, 2016 at 9:32

Coder John

7864 silver badges7 bronze badges

9 Comments

Jaquarh Over a year ago

Sorry, mouse moved (was meant to be a vote up - changed it) x)

Jai Over a year ago

This should work why? add details/explanations to complete the answer.

Jai Over a year ago

@CoderJohn You can edit your one answer instead of posting severals.

Coder John Over a year ago

Because I have removed the code that is making a state redirect @Jai

Coder John Over a year ago

Ok so for that you should initialize a variable in some service and then redirect and after redirection fetch the initialized variable from the service and update the view. If that works for you I will update the answer?

|

Coder John · Accepted Answer · 2016-03-18 09:24:36Z

0

The problem is on the line $state.go('newState'); Its redirecting to another state and reloading the page. If its same state than also it can happen

answered Mar 18, 2016 at 9:24

Coder John

7864 silver badges7 bronze badges

2 Comments

Richard Ansell Over a year ago

Okay, I understand where you're coming from in regards this but what would the recommended fix be though?

Coder John Over a year ago

Why would you make a $state.go('newState'); if you want the scope variable to be updated and that change to be reflected in HTML. Just initialize with what ever value you want the change would be reflected.

zion · Accepted Answer · 2016-03-18 09:36:54Z

0

First Initialize it outside

app.controller('myCtrl', ['$scope', 'Auth', '$state', '$stateParams', '$timeout',  
function($scope, Auth, $state, $timeout) {
if( $stateParams.newVal != null ){
    $scope.newValue = $stateParams.newVal;
}
$scope.buttonClick = function () {
    $state.go('newState', { newVal : 'Hello'});
};

}]);

in your state definition use 'params' argument

.state('newState', {
            .......
            .......
            params : { newVal: null },
            .......
            .......
        })

edited Mar 18, 2016 at 9:36

answered Mar 18, 2016 at 9:24

zion

4417 silver badges25 bronze badges

3 Comments

zion Over a year ago

So what is the controller name for 'newState', does it refer the same Controller?

Richard Ansell Over a year ago

Well I've actually kept the entire activity in the same controller

zion Over a year ago

You can use $stateParams, to do the fix, you can send different strings in params for setting different Values

Collectives™ on Stack Overflow

Angular JS script not updating view

4 Answers 4

6 Comments

9 Comments

2 Comments

3 Comments

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

6 Comments

9 Comments

2 Comments

3 Comments

Related