CODEWITHSUNDEEP
javascriptjqueryangularjs
Richard Ansell
Richard Ansell

Reputation: 926

Angular JS script not updating view

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.

Upvotes: 0

Views: 59

Answers (4)

zion
zion

Reputation: 421

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 },
            .......
            .......
        })

Upvotes: 0

Coder John
Coder John

Reputation: 786

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

Upvotes: 2

aup
aup

Reputation: 810

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.

Upvotes: 2

Coder John
Coder John

Reputation: 786

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

Upvotes: 0

Related Questions