您的位置:首页 > Web前端 > AngularJS

angular的脏检查

2016-07-18 18:03 363 查看
如果用js的方法改变了属性的值,就需要手动刷新页面。timeout,interval,scpe,都需要注入。其中前两者不需要手动刷新。angular在代码压缩的时候处理方式。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/angular.min.js"></script>
<style type="text/css">
.box{
width: 100px;
height: 100px;
background: chartreuse;
}
</style>
</head>

<body ng-app="my-app">
<div ng-controller="fristController">

<!--
ng-click是点击事件
函数的实现要在相应的controller中实现
在与作用域中寻找这个方法
-->
<div class="box" ng-click="fun()"></div>

{{obj}}
{{name}}
{{test}}
</div>
</body>
<script type="text/javascript">
var myapp = angular.module('my-app',[])
// 创建控制器 解决代码压缩混淆
// 注意事项: 用字符串(用“”包起来)放在函数前面,在用【】吧他们包起来
myapp.controller('fristController',['$scope','$rootScope','$timeout','interval',function($scope,$rootScope,$timeout,$interval){
$rootScope.obj = "test";
$scope.name = "fujichao";
$scope.fun = function(){
console.log("fuji")
// 使用js改变属性值后需要检查刷新才行, 但是在angular中可以直接改变
// 需要用$apply()来刷新
setTimeout(function(){

// 不建议这么写!!!!
$scope.name = "jijijiiigggggii";
//$scope.$apply();
// 一般的写法 这样写的好处是只检查参数函数中的变量的变化,如果没有参数的话就会检查所有的属性变化。
$scope.$apply(function(){
$scope.name = "jijijiiigggggii"+num;
})
});

// 使用angular的函数不需要再调用$apply()方法
$timeout(function(){
$scope.name = 'fufuufu'
})
$interval(function(){

})

}

// 一般不是用ng-init来初始化,而用着样的方式
$scope.name = '';
// angular语法可以直接改变属性值
$scope.name = '方法反反复复反复反复反复反复';

}]);

myapp.run(['$rootScope',function($rootScope){
$rootScope.test = "jijijji"
}]);
</script>
</html>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: