2014-01-13 4 views
11

Я пытаюсь использовать $ watch для него. Тело $ watch срабатывает при инициализации страницы (с неопределенным значением в newValue), а не при нажатии на кнопку «btnChangeIsLoggedIn».Как наблюдать примитивную переменную обслуживания в контроллере с помощью AngularJS?

<!DOCTYPE html> 
<html data-ng-app="myApp"> 
<head><title>title</title></head> 
<body> 
    <script src="lib/angular/angular.js"></script> 

    <div ng-controller="ctrl1"> 
     <input type="text" ng-model="isLoggedIn" /> 
     <input type="button" id="btnChangeIsLoggedIn" 
      value="change logged in" ng-click="change()" /> 
    </div> 

    <script> 
     var myApp = angular.module('myApp', []); 

     myApp.service('authService', function() { 
      this.isLoggedIn = false; 
     }); 

     myApp.controller('ctrl1', function ($scope, authService) { 
      $scope.isLoggedIn = authService.isLoggedIn; 

      $scope.$watch("authService.isLoggedIn", function (newValue) { 
       alert("isLoggedIn changed to " + newValue); 
      }, true); 

      $scope.change = function() { 
       authService.isLoggedIn = true; 
      }; 
     }); 
    </script> 
</body> 
</html> 

Что я делаю неправильно?

Мой код на JSFiddle: http://jsfiddle.net/googman/RA2j7/

ответ

19

Вы можете передать функцию, которая будет возвращать значение метода Сервиса. Угловой будет сравнивать его с предыдущим значением.

$scope.$watch(function(){ 
    return authService.isLoggedIn; 
}, function (newValue) { 
    alert("isLoggedIn changed to " + newValue); 
}); 

Демо: http://jsfiddle.net/TheSharpieOne/RA2j7/2/

Примечание: причина, по которой значение текстового поля не обновляется, потому что кнопка только меняет значение этого сервиса, а не $scope «s Вы также можете избавиться от этой начальной боевой готовности (запуск функции изменения), но сравнение newValue с oldValue и выполнение только операторов, если они разные.

+0

Спасибо! Правильно ли, что если я хочу изменить текстовое поле, я должен сделать что-то вроде этого: '$ scope. $ Watch (function() { return authService.isLoggedIn; }, function (newValue, oldValue) { if (newValue == oldValue) return; $ scope.isLoggedIn = newValue; alert ("isLoggedIn изменено с" + oldValue + "на" + newValue); }, true); '(http://jsfiddle.net/ googman/RA2j7/5 /) – Googman

+0

Да, это сработает. – TheSharpieOne

+0

Отлично! Большое спасибо! – Googman

Смежные вопросы