inner - AngularJS: $ reloj básico no funciona

ng-attr-title

Question

Estoy intentando configurar un reloj en AngularJS y claramente estoy haciendo algo mal, pero no puedo entenderlo. El reloj se dispara en la carga de la página inmediata, pero cuando cambio el valor observado no se dispara. Para el registro, también configuré el reloj en una función anónima para devolver la variable observada, pero tengo exactamente los mismos resultados.

He montado un ejemplo mínimo a continuación, haciendo todo en el controlador. Si hace una diferencia, mi código real está conectado a las directivas, pero ambos fallan de la misma manera. Siento que debe faltar algo básico, pero no lo veo.

HTML:

<div ng-app="testApp">
    <div ng-controller="testCtrl">
    </div>
</div>

JS:

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

function testCtrl($scope) {
    $scope.hello = 0;

    var t = setTimeout( function() { 
        $scope.hello++;
        console.log($scope.hello); 
    }, 5000);

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

El tiempo de espera funciona, hello incrementos, pero el reloj no se dispara.

Demostración en http://jsfiddle.net/pvYSu/

Answer 1

Es porque actualizas el valor sin saber Angular.

Debe usar el servicio $timeout lugar de setTimeout , y no tendrá que preocuparse por ese problema.

function testCtrl($scope, $timeout) {
    $scope.hello = 0;

    var t = $timeout( function() { 
        $scope.hello++;
        console.log($scope.hello); 
    }, 5000);

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

O puede llamar a $ scope. $ Apply (); forzar angular para volver a verificar los valores y llamar a los relojes si es necesario.

var t = setTimeout( function() { 
    $scope.hello++;
    console.log($scope.hello); 
    $scope.$apply();
}, 5000);

Answer 2

Puedes usar sin $ intervalo y $ tiempo de espera

$scope.$watch(function() {
            return variableToWatch;
        }, function(newVal, oldVal) {
            if (newVal !== oldVal) {
                //custom logic goes here......
            }
        }, true);

Answer 3

También puede suceder porque la división no está registrada con el controlador. Agregue un controlador a su div como sigue y su reloj debería funcionar:

<div ng-controller="myController">