angular中的$watch和服务
2018-11-04 本文已影响0人
yscmh
$watch 监视数据模型的变化
$scope.name = '小明'
$scope.age = 18
// $watch可以用来监视数据模型的变化
// 第一个参数: 数据模型对应的名字(字符串形式)
// 第二个参数: 相应的数据模型变化就会调用 这个函数
// 默认会直接执行一次回调函数
$scope.$watch('name',function(now,old){
// 第一个参数是变化后的值
// 第二个参数是变化前的值
// console.log(now,old)
})
- 也可以监视方法的返回值
$scope.getAge = function(){
return $scope.age
}
// 也能够监视$scope.属性中的方法的返回值
$scope.$watch('getAge()',function(now,old){
console.log(now,old)
})
//*$watch监视的是$scope的属性，如果是一个普通变量是无法监视的*
function getName(){
return $scope.name
}
$scope.tmp = getName
$scope.$watch('tmp()',function(now,old){
console.log(now,old)
})
$watch具体代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>$watch</title>
</head>
<body ng-app="hello">
<div ng-controller="helloController">
<input type="text" ng-model="name">
<input type="text" ng-model="age">
<button>测试</button>
</div>
<script src="libs/angular.js"></script>
<script>
// 1.创建模块
var app = angular.module('hello', [])
// 2.创建控制器
app.controller('helloController',['$scope',function($scope){
$scope.name = '小明'
$scope.age = 18
// $watch可以用来监视数据模型的变化
// 第一个参数: 数据模型对应的名字(字符串形式)
// 第二个参数: 相应的数据模型变化就会调用 这个函数
// 默认会直接执行一次回调函数
$scope.$watch('name',function(now,old){
// 第一个参数是变化后的值
// 第二个参数是变化前的值
// console.log(now,old)
})
$scope.getAge = function(){
return $scope.age
}
// 也能够监视$scope.属性中的方法的返回值
$scope.$watch('getAge()',function(now,old){
console.log(now,old)
})
//*$watch监视的是$scope的属性，如果是一个普通变量是无法监视的*
function getName(){
return $scope.name
}
$scope.tmp = getName
$scope.$watch('tmp()',function(now,old){
console.log(now,old)
})
}])
</script>
</body>
</html>
服务
- 创建服务
// 1.创建服务模块
var app = angular.module('service',[])
// 2.创建服务
// 第一个参数：服务的名字
// 第二个参数里的function:
// angular会把这个function当作构建函数，angular会帮助我们new这个构建函数，然后得到一个对象。A,B
app.service('MyService', [function(){
this.name = '小明'
}])
- 使用服务
// 1.创建模块
var app = angular.module('todosApp', ['service'])
// 2.创建控制器
app.controller('todosController', [
'MyService'
, function(MyService){
// 这个MyService就是，对应的'MyService'时的回调函数new出的对象
console.log(MyService)
}])
