Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to change value after delay by using angularjs?

I created basic application based on angularjs

HTML:

<div ng-app="miniapp">
<div ng-controller="Ctrl">
    My name is 
    <input type="text"/>   
    Val: {{val}}
    <br/>
    <button ng-disabled="val">Submit</button>        
</div>    

JS:

var app = angular.module('miniapp', []);

var glob;
function Ctrl($scope) {      
    glob = $scope;    
     $scope.val = false;

     window.setTimeout(function() {
            $scope.val = true;
        }, 3000);             
}

 window.setTimeout(function() {
            glob.val = true;
        }, 3000); 

As you can see I try to change val to true after 3 sec by 2 ways but no one is working for me. Really strange. Did I miss something?

Actually I try to change value after get response from Ajax, but suppose should be the same problem.

Thanks,

Here is my example: http://jsfiddle.net/6uKAT/20/

like image 546
Maxim Shoustin Avatar asked Apr 17 '13 20:04

Maxim Shoustin


People also ask

What is debounce in AngularJS?

debounce : integer value which contains the debounce model update value in milliseconds. A value of 0 triggers an immediate update. If an object is supplied instead, you can specify a custom value for each event. For example: ng-model-options="{ updateOn: 'default blur', debounce: { 'default': 500, 'blur': 0 } }"

What is $timeout in AngularJS?

The '$timeout' service of AngularJS is functionally similar to the 'window. setTimeout' object of vanilla JavaScript. This service allows the developer to set some time delay before the execution of the function.

What is $Watch in AngularJS?

What is the angular JS watch function? The angular JS $watch function is used to watch the scope object. The $watch keep an eye on the variable and as the value of the variable changes the angular JS $what runs a function. This function takes two arguments one is the new value and another parameter is the old value.

What is form validation in AngularJS?

Form ValidationAngularJS monitors the state of the form and input fields (input, textarea, select), and lets you notify the user about the current state. AngularJS also holds information about whether they have been touched, or modified, or not.


2 Answers

Try using: $timeout

Angular's wrapper for window.setTimeout. The fn function is wrapped into a try/catch block and delegates any exceptions to $exceptionHandler service.

$timeout(fn[, delay][, invokeApply]);

Updated Fiddle

JavaScript

var app = angular.module('miniapp', []);

function Ctrl($scope, $timeout) {  
     $scope.val = false;
     $timeout(function(){$scope.val = true}, 3000);       
} 
like image 175
Chase Avatar answered Oct 10 '22 13:10

Chase


You are making changes to scope outside of what angular knows about (inside a timeout).
So you should use $timeout.. otherwise you have to use $scope.$apply()

$timeout(function() {
    $scope.val = true;
}, 3000); 

http://jsfiddle.net/6uKAT/21/

For timeout use $timeout and it will call $scope.$apply() for you.
Likewise, for ajax use $http.

if you can't use these, then you must call $scope.$apply() yourself:

 window.setTimeout(function() {
     $scope.$apply(function() {
        $scope.val = true;
     });
 }, 3000);
like image 27
Austin Greco Avatar answered Oct 10 '22 11:10

Austin Greco