@(E-angular學(xué)習(xí))
angular 如何使用$scope.$watch()以及使用了controllerAs
angular的watch監(jiān)控值的變化方便了很多事情，下面講解幾種watch的寫法帝美，特別是有controllerAs的值以及使用this的時(shí)候亭枷，如果優(yōu)雅的使用watch
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>echats</title>
<!-- <script src="http://cdn.bootcss.com/echarts/3.4.0/echarts.common.js"></script> -->
<!-- <script src="https://cdn.bootcss.com/echarts/3.4.0/echarts.common.min.js"></script> -->
<script src="js/lib/echarts/dist/echarts.min.js"></script>
<!-- <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script> -->
<script src="js/lib/angular/angular.min.js"></script>
<script src="js/lib/angular-route/angular-route.js"></script>
<!-- <script src="js/lib/angular/release/angular-ui-router.js"></script> -->
<link rel="stylesheet" href="js/lib/bootstrap/dist/css/bootstrap.min.css">
<script src="js/lib/jquery/dist/jquery.min.js"></script>
<script src="js/lib/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="app.js"></script>
<script src="http://www.page2images.com/js/p2i.js"> </script>
<!-- <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
<script src="http://apps.bdimg.com/libs/angular-route/1.3.13/angular-route.js"></script> -->
<!-- <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
<script src="https://apps.bdimg.com/libs/angular-route/1.3.13/angular-route.js"></script> -->
</head>
<body ng-app="app">
<div ng-controller="myCtrl as Ctrl">
不使用controllerAs的：
<input type="text" ng-model = "person.name">
name的變化 <span>我的名字是{{person.name}}</span>
<hr>
這個(gè)是使用controllerAs的：
<input type="text" ng-model = "Ctrl.people.name">
<span>{{Ctrl.people.name}}</span>
</div>
<script>
// angular.module("app",["app.ui"]);
angular.module("app",[]);
angular.module("app")
.controller("myCtrl",function($scope){
var vm = this;
$scope.person = {
"name":"王小二"
};
//當(dāng)使用scope的時(shí)候就可以監(jiān)控person屬性了供汛，第三個(gè)參數(shù) true是針對(duì)引用類型的情況橡淑，當(dāng)為true的時(shí)候也監(jiān)控 屬性中的值的變化。
$scope.$watch("person",function(newValue,oldValue){
console.log("我的不帶controllerAs的name是",newValue);
},true);
vm.people = {
"name":"李小三"
}
//當(dāng)我們使用this的時(shí)候抗俄，Html中使用的是controllerAs 這種情況就不能使用了
$scope.$watch("people",function(newValue,oldValue){
console.log("我的帶controllerAs的name是",newValue);
},true);
//注意區(qū)別炉抒，當(dāng)我們使用vm.people的時(shí)候也是不行的奢讨。加上第三個(gè)參數(shù)也是不行的
$scope.$watch("vm.people",function(newValue,oldValue){
console.log("我的帶vm.people的name是",newValue);
});
//可以使用下面幾種方法，
//第一種,這一種是改監(jiān)控的對(duì)象焰薄，只要監(jiān)控的對(duì)象改為ControllerAs的值即可拿诸，同樣第三個(gè)參數(shù)設(shè)為true，這種雖說(shuō)是最簡(jiǎn)單的塞茅，但是要知道controllerAs的值亩码，不太友好
$scope.$watch("Ctrl.people",function(newValue,oldValue){
console.log("Ctrl.people的name是",newValue);
},true);
//第二種：這種雖然不用知道controllerAs的值，但是過(guò)于繁瑣凡桥；
$scope.$watch(function() {
return vm.people
}.bind(vm), function(newName) {
console.log("帶有return的值vm.people的name是",newName);
}.bind(vm),true);
//第三種蟀伸，這是一種最友好的方式不用關(guān)心controllerAs的值，
$scope.$watch(function(scope){
return vm.people;
},function(newValue,oldValue){
console.log("另一種vm.people的name是",newValue);
},true);
})
</script>
</body>
</html>
參考文獻(xiàn)：
Understanding How To Use $scope.$watch() With Controller-As In AngularJS
Using $scope.$watch when using `this` scope in controller
