Menu
I'm trying to use $watch for it. The $watch body firing at page initialization (with undefined in newValue) and not firing at "btnChangeIsLoggedIn" click.
<!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>
What I'm doing wrong?
My code at JSFiddle: http://jsfiddle.net/googman/RA2j7/
720
To examine the scope in the debugger: Right click on the element of interest in your browser and select 'inspect element'. You should see the browser debugger with the element you clicked on highlighted. The debugger allows you to access the currently selected element in the console as $0 variable.
Services are singletons, and it is not logical for a scope to be injected in service (which is case indeed, you cannot inject scope in service).
The $scope in an AngularJS is a built-in object, which contains application data and methods. You can create properties to a $scope object inside a controller function and assign a value or function to it. The $scope is glue between a controller and view (HTML).
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.
You can pass a function that will return the value of the Service's method. Angular will then compare it to the previous value.
$scope.$watch(function(){
return authService.isLoggedIn;
}, function (newValue) {
alert("isLoggedIn changed to " + newValue);
});
Demo: http://jsfiddle.net/TheSharpieOne/RA2j7/2/
Note: the reason the text field value doesn't update is because the button only changes the service's value, not the $scope's You can also get rid of that initial alert (running of the change function) but comparing the newValue to the oldValue and only executing the statements if they are different.
137
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
