JQLite--$watch--$q.defer
2017-06-04 本文已影响20人
MGd
-
jqLite
- 作用：
- 把一个dom节点转成jq节点，但是只包含了jquery一部分功能。
- 如果说已经引入了jquery,那么使用angular.element(box);获取的对象就是一个原生jquery对象
- 方法：
- 1.获取dom节点
var box = document.querySelector('.box'); - 2.把dom节点转换成jq节点
box = angular.element(box); -
$watch
- $watch是$scope里面的一个方法
- 使用：$watch('$scope身上的属性',fun(newV,oldV)){}
- 当属性值改变时，会自动调用回调方法fun()。newV:属性改过之后最新的值。oldV:属性修改之前的值。
- 默认情况下是不能直接监听对象。如果想要监听一个对象，加上第三个参数true ,为true可以监听对象的变化。
- 如何取消一个watch监听？
- 在调用$watch会返回一个方法。想要取消监听，直接执行返回的方法即可。
- 例子：
per是对象，name是属性
//1.创建模板
var app = angular.module('app', []);
//2.创建控制器
app.controller('myController', ['$scope', function ($scope) {
$scope.name = 'xmg';
var count = 3;
var unWatch = $scope.$watch('per.name',function (newV,oldV) {
console.log(newV+'-----'+oldV);
count--;
if (count == 0){
unWatch(); //取消监听。
}
},true); //为true可以监听对象的变化
}]);
//3.绑定模块
//4.绑定控制器
</script>
</head>
<body ng-app="app" ng-controller="myController">
<input type="text" ng-model="per.name">
<input type="text" ng-model="per.age">
<h1>{{per.name}}</h1>
<h1>{{per.age}}</h1>
- 当name在input中发生变化的时候，newV打印出来的是发生变化的值，oldV打印出来的是之前的值（因为没有赋值，所以是undefined）
-
$q.defer(推断方法)
- $q是一个服务，需要注入。
- 使用：
- 1.首先创建一个延时服务，也就是用$q调用defer方法。
var defer = $q.defer(); - 2.推断选择执行。发送网络请求，有成功响应，也有失败响应。那么就会选择一个执行。这时候就使用这次发送请求的返回值（结果），再一次发送请求。
//1.创建模板
var app = angular.module('app', []);
//2.创建控制器
app.controller('myController', ['$scope','$http','$q', function ($scope,$http,$q) {
var defer = $q.defer();
$http({
url:'url',
method:'get',
}).then(function (res) { //请求成功，获得返回值。用返回的值再一次发送请求
defer.resolve(res);
}).catch(function (error) {
defer.reject(error);
});
defer.promise.then(function (res) { //上面请求成功对应的再次请求。
//resolve
alert(res);
},function (error) {
//reject
alert('error'+error);
}).finally(function () {
//finally一定会执行。
alert('fin');
});
}]);
//3.绑定模块
//4.绑定控制器
</script>
</head>
<body ng-app="app" ng-controller="myController">
</body>
