javascript - setTimeout() not working in angularjs? - Stack Overflow

admin管理员组

文章数量:1340938

New to AngularJSs. Wondering why setTimeout is not working. Is it true that it doe snot work with AngularJS?

jsfiddle

<div ng-controller="MyCtrl">
    <select ng-model='form'  ng-options='option.value as option.name for option in typeOptions'></select>
</div>
<script>
var myApp = angular.module('myApp',[]);


function MyCtrl($scope) {

    //$scope.typeOptions = [];
    alert("hi23");
    $timeout(function() {
        alert("hi");
        $scope.typeOptions =
    [
    { name: 'Feature', value: 'feature' }, 
    { name: 'Bug', value: 'bug' }, 
    { name: 'Enhancement', value: 'enhancement' }
    ]; 
     $scope.form =  $scope.typeOptions[1].value;                     
    }, 3000);


}
</script>

Thanks.

New to AngularJSs. Wondering why setTimeout is not working. Is it true that it doe snot work with AngularJS?

jsfiddle

<div ng-controller="MyCtrl">
    <select ng-model='form'  ng-options='option.value as option.name for option in typeOptions'></select>
</div>
<script>
var myApp = angular.module('myApp',[]);


function MyCtrl($scope) {

    //$scope.typeOptions = [];
    alert("hi23");
    $timeout(function() {
        alert("hi");
        $scope.typeOptions =
    [
    { name: 'Feature', value: 'feature' }, 
    { name: 'Bug', value: 'bug' }, 
    { name: 'Enhancement', value: 'enhancement' }
    ]; 
     $scope.form =  $scope.typeOptions[1].value;                     
    }, 3000);


}
</script>

Thanks.

• javascript
• html
• angularjs

Share Improve this question Follow edited May 26, 2015 at 23:52 scniro 17k88 gold badges6666 silver badges107107 bronze badges asked May 26, 2015 at 23:02 packetiepacketie 5,0791212 gold badges4141 silver badges7979 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 8

you need to inject $timeout. Observe the following change

function MyCtrl($scope, $timeout) { 
    ....
}

See the $timeout docs for more information

---

Furthermore, this style of declaring controllers is not remended. I would encourage re-fractoring to the following...

myApp.controller('MyCtrl', ['$scope', '$timeout', function($scope, $timeout) {
    .... 
}]);

Angular has a list of watchers, which is all the variables and objects that bind the view with its model. Angular keeps listening for events that change any of these and starts a digest cycle to update the DOM with the new values.

When you use setTimeout, it runs asynchronously and all the code inside setTimeout is not watched by Angular, even though it might be changing one of the Angular scope values.

So you can either use $timeout as suggested above or you can wrap your setTimeout code within $scope.$apply, which tells Angular to watch for it also.

This is also a good practice for any external Jquery libraries you may be using within your Angular app. Although remended way is to use Angular wrappers for such libraries.

本文标签： javascriptsetTimeout() not working in angularjsStack Overflow