简介
使用Angular或者Vue的都知道，这两种语言都是操作数据从而促使页面自动更新，但是有的时候即使数据改变了页面也不会更新，这一节我们探讨什么时候数据更新了但是页面却没更新。
第一组组代码
<html ng-app="myApp">
<body ng-controller="myController">
{{name}}
<button ng-click="change">改变值</button>
</body>
<script>
var app = angular.module("myApp", []);
app.controller("myController",["$scope",function($scope){
//我们在页面输出vue
$scope.name = "AnguarJs";
$scope.age = 24;
$scope.change = function() {
$scope.age = 25;
//页面没有用{{}}显示age,这个时候我们点击按钮页面的值由AngularJs变成了new Angular
};
//我们做个定时器来改变页面的name值
setTimeout(function() {
$scope.name = "new Angular";
console.log($scope.name );//输出改变后的值，没问题，但是页面没有更新，为什么呢？往后看，我们加个按钮，点击改变一个跟name不相关的值我们定义为age
},1000)
}]);
</script>
</html>
总结：有这个例子我们可以总结出，非ng-指令的方法不能使Angular的页面更新,由此我们也得出一个结论ajax请求成数据赋值，不会更新页面。
第二组代码
<html ng-app="myApp">
<body ng-controller="myController">
{{name}}
</body>
<script>
var app = angular.module("myApp", []);
app.controller("myController",["$scope",function($scope){
$scope.name = "AngularJs";
setTimeout(function() {
$scope.name = "new Angular";
//手动更新
$scope.apply();//当我们加上这句代码，发现页面更新了，但是这样写会更新$scope里面的所有数据。
$scope.apply(function() {//如此一来我们只更新了name
$scope.name = "new Angular";
});
},1000);
}])
</script>
</html>
总结：$scope.apply();可以在ajax请求数据之后更新页面。
属性监听器
属性监听器是用来监听值的变化，从而可以执行相应的操作
$scope.$watch(function(newVal,oldVal) {
//newVal新值 oldVal旧值
})
内置定时器
$interval(function() {
$scope.age += 1;
},1000)
$timeout(function() {
$scope.name = "new val"
},1000);
注意：使用前请先在控制器内注入，并且两种方式都会更新页面。
总结:ng-指令可以出发页面的更新，ajax请求成功数据直接赋值无法触发页面更新，必须手动更新（$scope.apply()）,内置定时器可以出发页面的更新。
不积跬步无以至千里,不积小流无以成江海
网友评论