angular 如何使用$scope.$watch()以及使用了
2018-04-09 本文已影响21人
holy俊辉
@(E-angular学习)
angular 如何使用$scope.$watch()以及使用了controllerAs
angular的watch监控值的变化方便了很多事情，下面讲解几种watch的写法，特别是有controllerAs的值以及使用this的时候，如果优雅的使用watch
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>echats</title>
<!-- <script src="//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>
这个是使用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":"王小二"
};
//当使用scope的时候就可以监控person属性了，第三个参数 true是针对引用类型的情况，当为true的时候也监控 属性中的值的变化。
$scope.$watch("person",function(newValue,oldValue){
console.log("我的不带controllerAs的name是",newValue);
},true);
vm.people = {
"name":"李小三"
}
//当我们使用this的时候，Html中使用的是controllerAs 这种情况就不能使用了
$scope.$watch("people",function(newValue,oldValue){
console.log("我的带controllerAs的name是",newValue);
},true);
//注意区别，当我们使用vm.people的时候也是不行的。加上第三个参数也是不行的
$scope.$watch("vm.people",function(newValue,oldValue){
console.log("我的带vm.people的name是",newValue);
});
//可以使用下面几种方法，
//第一种,这一种是改监控的对象，只要监控的对象改为ControllerAs的值即可，同样第三个参数设为true，这种虽说是最简单的，但是要知道controllerAs的值，不太友好
$scope.$watch("Ctrl.people",function(newValue,oldValue){
console.log("Ctrl.people的name是",newValue);
},true);
//第二种：这种虽然不用知道controllerAs的值，但是过于繁琐；
$scope.$watch(function() {
return vm.people
}.bind(vm), function(newName) {
console.log("带有return的值vm.people的name是",newName);
}.bind(vm),true);
//第三种，这是一种最友好的方式不用关心controllerAs的值，
$scope.$watch(function(scope){
return vm.people;
},function(newValue,oldValue){
console.log("另一种vm.people的name是",newValue);
},true);
})
</script>
</body>
</html>
参考文献：
Understanding How To Use $scope.$watch() With Controller-As In AngularJS
Using $scope.$watch when using `this` scope in controller
