AngularJS - $ часов не работают, как ожидалось

Question

Вот мой app.js

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

MyApp.controller('MyController', ['$scope', function($scope){ 

    $scope.watchMe = 'hey'; 

    $scope.init = function() { 
    setTimeout(function() { 
     $scope.watchMe = 'changed!'; 
    }, 3000) 

    }; 

    $scope.$watch('watchMe', function() { 
    console.log($scope.watchMe) 
    }); 

}]); 

Я думал, через 3 секунды, я вижу:

'changed!' 

в моей консоли.

Вместо этого, я просто вижу:

'hey' 

Я называю функцию мой Init() в index.html, как таковой:

<div ng-controller="MyController" ng-init="init()"> 

Почему я вижу этот вывод?

Answer 1

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

MyApp.controller('MyController', ['$scope', '$timeout', function($scope, $timeout){ 

    $scope.watchMe = 'hey'; 

    $scope.init = function() { 
    $timeout(function() { 
     $scope.watchMe = 'changed!'; 
    }, 500); 

    }; 

    $scope.$watch('watchMe', function(newVal, oldVal) { 
    console.log(newVal); 
    }); 

}]); 

Вы используете метод setTimeout. Угловое не наблюдает за этим событием. используйте $ timeout сервис углового, тогда вы можете увидеть ожидаемый результат.

Подробнее о угловом цикле сбора и грязной проверке для более подробной информации.