一,$scope的作用;
1,用来完成在view和controller之间的数据传递,$scope是实现angular中MVVM双向数据同步的关键;
2,所有页面上的属性和方法都放在$scope上进行声明;
3,$scope上面的属性和方法,angular会给该属性或方法添加一个监视器,在当前控制器中创建一个$watchList[ ];
wacth对象会对当前的数据中的变量旧值和新值进行比较如果不同便输出新值这就实现了双向数据同步;
二,$scope嵌套会出现覆盖问题,通过$scope.$parent解决并继承父模块的数据;
eg;
(function(){
var root =angular.module("root",["m1"]);
var m1=angular.module("m1",[]);
m1.controller("m1one",function($scope){
$scope.msg="hello m1one";
})
m1.controller("m1two",function($scope){
$scope.msg="hello m2one";
$scope.pmsg=$scope.$parpent.msg;
})
m1.controller("m1three",function($scope){
$scope.msg="hello m3one";
$scope.pmsg=$scope.$parpent.msg;
$scope.gmsg=$scope.$parpent.$parpent.mdg;
})
})
<html ng-app="demo">
<body>
<div ng-controller="m1one">
{{msg}}
<div ng-controller="m1two">
{{pmsg}}--{{msg}}
<div ng-controllerthree>
{{gmsg}}--{{pmsg}}--{{msg}}
</div>
</div>
</div>
</body>
</html>
显示在页面上就是
hello m1one
hello m1one hello m2one
hello m1one hello m2one hello m3one
三.$scope.$digest和$scope.$apply的作用及作用;
$scope.$digest;和$scope.$appiy的作用都是手动开启脏值检查实现双向数据同步;
eg;
(function(){
angular.module("demo",[ ]);
.controller("one",function($scope){
$scope.time=new Data().toLocaleTimeString();
setInterval(function(){
$scope.time=new Data().toLocaleTimeString();
,1000)
})
}();
如果这种写法页面只会显示一个不会改变的时间;没有双向数据传递;这时候就需要手动启动脏值检查;
用$scope.$digest方法;
(function(){
angular.module("demo",[ ]);
.controller("one",function($scope){
$scope.time=new Data().toLocaleTimeString();
setInterval(function(){
$scope.time=new Data().toLocaleTimeString();
$scope.$digest();
,1000)
})
})();
用$scope.$apply方法;(function(){
angular.module("demo",[ ]);
.controller("one",function($scope){
$scope.time=new Data().toLocaleTimeString();
setInterval(function(){
$scope.$apply(function({
$scope.time=new Data().toLocaleTimeString();
})
,1000)
})
}();