anjularjs常用的内置方法
2016-04-18 16:51
555 查看
1.$apply
anjularjs通过$apply方法去执行脏检查,及时告诉model绑定变量更新。
示例:定义一个date变量显示在页面上,它的控制器是firstCtrl,这个date变量有一个时钟功能,每一秒变一次。
页面上:
<div ng-controller="firstCtrl">
{{date}}
</dv>
Controller.js:
var firstCtrl=function($scope){
$scope.date=new Date();
setInterval(function(){
$scope.$apply(function(){
$scope.date=new Date();
});
});
}
2.$watch
使用watch手动的监听某个基本变量或者对象变量,当变量或者对象变量改变的时候去触发某些事件。
示例:监听name变量的变化,当name变量的变化超过30次,就不让其变化,并一直保持某个值。
页面上:
<div ng-controller="firstCtrl">
<input type="text" ng-model="name"></input>
{{name}}
</div>
controller.js:
var firstCtrl=function($scope){
$scope.name='小明';
$scope.count=0;
$scope.$watch('name',function(newValue,oldValue){
++$scope.count;
if(scope.count>30){
$scope.name='watch方法监听name变化超过30次之后不让其改变!';
}
});
}
注意:也许你会有这样的疑惑,$apply方法是触发脏检查的,但是watch方法里面的name变量和count居然也能自动变化?其实在apply方法去触发脏检查的时候,
也是通过watch方法找到digest方法去判断并更新model的,所以道理是相同的。
anjularjs通过$apply方法去执行脏检查,及时告诉model绑定变量更新。
示例:定义一个date变量显示在页面上,它的控制器是firstCtrl,这个date变量有一个时钟功能,每一秒变一次。
页面上:
<div ng-controller="firstCtrl">
{{date}}
</dv>
Controller.js:
var firstCtrl=function($scope){
$scope.date=new Date();
setInterval(function(){
$scope.$apply(function(){
$scope.date=new Date();
});
});
}
2.$watch
使用watch手动的监听某个基本变量或者对象变量,当变量或者对象变量改变的时候去触发某些事件。
示例:监听name变量的变化,当name变量的变化超过30次,就不让其变化,并一直保持某个值。
页面上:
<div ng-controller="firstCtrl">
<input type="text" ng-model="name"></input>
{{name}}
</div>
controller.js:
var firstCtrl=function($scope){
$scope.name='小明';
$scope.count=0;
$scope.$watch('name',function(newValue,oldValue){
++$scope.count;
if(scope.count>30){
$scope.name='watch方法监听name变化超过30次之后不让其改变!';
}
});
}
注意:也许你会有这样的疑惑,$apply方法是触发脏检查的,但是watch方法里面的name变量和count居然也能自动变化?其实在apply方法去触发脏检查的时候,
也是通过watch方法找到digest方法去判断并更新model的,所以道理是相同的。
相关文章推荐
- html5+javascript实现简单上传的注意细节
- javascript 无语的==
- javascript字符串
- js复制到剪切板
- EXTJS4.2中单选框及多选框
- jsp的include两种使用方法
- jsp两个页面的跳转
- js断点调试心得
- JavaScript的对象转为原始值
- js定时器避免闭包
- 如何移除Joomla自带的js和link文件
- 解决引入js出现红叉
- JS关闭页面弹窗提醒
- $.post(url,[data],[callback],'json')
- 使用SeaJS实现模块化JavaScript开发
- javascript中的分号【;】
- linqjs的常用方法
- javascript 上传图片 检测宽度 高度 文件大小
- js滚动页面到固定位置进行操作
- javascript组件开发方式