极客教程在AngularJs中如何Watch服务变量
$scope在AngularJs中作为一个内置的对象。
它由应用程序的数据和方法组成。$scope作为控制器和视图（HTML）之间的链接。
$scope是用来传输数据的。
$watch:
AngularJs对象中的范围有watch事件，当模型属性被改变或更改时，它就会出现。
当从视图中的某个程序点创建数据绑定到scope对象上的一个变量时，AngularJs内部会创建一个watch。
当我们watch()一个函数时，摘要被多次调用。
每次当我们绑定用户界面时，我们在watch列表中插入$watch。
User: <input type="text" ng-model="user" />
Password: <input type="password" ng-model="pass" />
示例:
<!DOCTYPE html>
<html>
<head>
<title>
AngularJs watch() Function with GFG
</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js">
</script>
<script type="text/javascript">
var app = angular.module("watchApp", []);
app.controller("watchCtrl", function (scope) {
scope.count = -1;
scope.watch(
"txtval", function (newval, oldval) {
scope.count = scope.count + 1;
});
});
</script>
</head>
<body>
<div ng-app="watchApp"
ng-controller="watchCtrl">
Enter Text:<input type="text"
ng-model="txtval" />
<br />
<br />
<span style="color: Green;">
watch() Function Fired: {{count}}</span>
</div>
</body>
</html>
输出
AngularJs中的watch是一种服务。
它用于跟踪特定范围内特定属性的变化。它类似于一个事件监听器，在指定的变量值中发生变化。
当我们注册一个手表时，我们将两个函数作为参数传递给watch()函数。这些函数是。
- 一个价值函数
- 一个听众功能
示例:
$scope.$watch(function() {}, //value function
function() {} //listener function
);
一个观察者可以在反应中改变。
- Timeouts
- UI
- 由网络工作者执行的复杂的异步计算
- Ajax调用
使用的方法： scope.watchGroup
$watchGroup()是设置具有相同回调的观察者的快捷方式，它传递一个watchExpressions数组。
$scope.$watchGroup(['obj.a', 'obj.b.bb[4]', 'letters[8]'], function(newValues, oldValues, scope) { //... })
scope.watchCollection是观察数组或对象的一个快捷方式。在数组中，当任何元素被替换、删除或添加时，监听器会被调用。
$watch保持对该变量的跟踪。这个函数需要两个参数。
new value
$scope.$watch(‘expression’, function (newvalue, oldvalue) { //expression parameter //Code });
old value
$scope.$watch(function () {}, function (newvalue, oldvalue) { //Function Parameter // Code });
示例:
<!DOCTYPE html>
<html>
<head>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js">
</script>
</head>
<body ng-app="myNgApp">
<div ng-controller="myController">
Message: <input type="text"
ng-model="message" />
<br />
New Message: {{newMessage}} <br />
Old Message: {{oldMessage}}
</div>
<script>
var ngApp = angular.module('myNgApp', []);
ngApp.controller('myController', function (scope) {
scope.message = "GeeksForGeeks!";
scope.watch(
'message', function (newValue, oldValue) {
scope.newMessage = newValue;
scope.oldMessage = oldValue;
});
});
</script>
</body>
</html>
Others:
$digest()
当AngularJS认为有必要时，我们调用$digest()函数。
例如，在一个按钮点击处理程序被执行后，或在一个AJAX调用返回后。
$apply():
scope.apply()函数以一个函数为参数，它被执行，之后scope.digest()被内部调用。这使得它有助于所有的手表被检查。
$scope.$apply(function() {
$scope.data.myVar = "value";
});
$Watch的例子：
<div class="container" data-ng-app="app">
<div class="well" data-ng-controller="FooCtrl">
<p><strong>Controller1</strong></p>
<div class="row">
<div class="col-sm-6">
<p><a href=""
ng-click=
"setItems([ { name: 'I am single item' } ])">
Send item one </a></p>
<p><a href=""
ng-click=
"setItems([ { name: 'Item 1 of 2' },
{ name: 'Item 2 of 2' } ])">
Send item two </a></p>
<p><a href=""
ng-click=
"setItems([ { name: 'Item 1 of 3' },
{ name: 'Item 2 of 3' },
{ name: 'Item 3 of 3' } ])">
Send item three </a></p>
</div>
<div class="col-sm-6">
<p><a href=""
ng-click="setName('Sheldon')">
Send name: Geeks</a></p>
<p><a href=""
ng-click="setName('Leonard')">
Send name: For</a></p>
<p><a href=""
ng-click="setName('Penny')">
Send name: Geeks</a></p>
</div>
</div>
</div>
<div class="well"
data-ng-controller="BarCtrl">
<p><strong>Controller2</strong></p>
<p ng-if="name">Name is: {{ name }}</p>
<div ng-repeat="item in items">
{{ item.name }}</div>
</div>
</div>
var app = angular.module('app', []);
app.factory('PostmanService', function() {
var Postman = {};
Postman.set = function(key, val) {
Postman[key] = val;
};
Postman.get = function(key) {
return Postman[key];
};
Postman.watch = function(scope, key, onChange) {
returnscope.watch(
function() {
return Postman.get(key);
},
function(newValue, oldValue) {
if (newValue !== oldValue) {
// Only update if the value changed
scope[key] = newValue;
// Run onChange if it is function
if (angular.isFunction(onChange)) {
onChange(newValue, oldValue);
}
}
}
);
};
return Postman;
});
app.controller('FooCtrl', ['scope',
'PostmanService',
function(scope, PostmanService) {
scope.setItems = function(items) {
PostmanService.set('items', items);
};
scope.setName = function(name) {
PostmanService.set('name', name);
};
}]);
app.controller('BarCtrl', ['scope',
'PostmanService',
function(scope, PostmanService) {
scope.items = [];
scope.name = '';
PostmanService.watch(scope, 'items');
PostmanService.watch(
scope,'name', function(newVal, oldVal) {
alert('Hi, ' + newVal + '!');
});
}]);
CSS:
.well {
margin-top: 10px;
margin-bottom: 10px;
}
p:last-child {
margin-bottom: 0;
}
