angularJs1.x <三、ng-bind>
2015-09-11 10:56
567 查看
在上一节我们说到angularJs的controller,我们平时用{{ }}取值是能够正常取值,但是会出现一定问题,因为AngularJs是在页面加载完毕之后进行脏数据检查,然后更新
所以在网络出现延迟的情况下我们就会出现页面刚打开 出现大量类似于{{ name }}的东西,页面加载完成后,这些又自动更新为所属属性的值;具体我们看下例子如下:
本例子必须启动服务器进行测试,如果将html拖入
首先,我在引入Angularjs之前先来一个alert(1)的js代码,大家知道alert会暂停js的代码执行
<script type="text/javascript">
alert(11);
</script>
<script src="../../angularJs/angular.min.js"></script> -
<script src="../../angularJsDemo/03.ng-bind/controller.js"></script>
然后controller.js中的代码
var controllerDemo=function($scope){
//申明一个model
$scope.name="小明";
$scope.sex="男";
}
html页面中的代码
<div ng-app="">
<div ng-controller="controllerDemo">
<input type="text" ng-model="name" value="">
{{name}}
</div>
</div>
然后我们运行html文件:首先出现的是
点击确定后,恢复正常
此时,需要解决这类问题,只需要 将 {{name}} 用ng-bind方式进行获取,改为<div ng-bind="name"></div>,这里我是用的div,大家可以根据自己需要进行标签选择!修改后则不会出现点击确定前的情况了
所以在网络出现延迟的情况下我们就会出现页面刚打开 出现大量类似于{{ name }}的东西,页面加载完成后,这些又自动更新为所属属性的值;具体我们看下例子如下:
本例子必须启动服务器进行测试,如果将html拖入
首先,我在引入Angularjs之前先来一个alert(1)的js代码,大家知道alert会暂停js的代码执行
<script type="text/javascript">
alert(11);
</script>
<script src="../../angularJs/angular.min.js"></script> -
<script src="../../angularJsDemo/03.ng-bind/controller.js"></script>
然后controller.js中的代码
var controllerDemo=function($scope){
//申明一个model
$scope.name="小明";
$scope.sex="男";
}
html页面中的代码
<div ng-app="">
<div ng-controller="controllerDemo">
<input type="text" ng-model="name" value="">
{{name}}
</div>
</div>
然后我们运行html文件:首先出现的是
点击确定后,恢复正常
此时,需要解决这类问题,只需要 将 {{name}} 用ng-bind方式进行获取,改为<div ng-bind="name"></div>,这里我是用的div,大家可以根据自己需要进行标签选择!修改后则不会出现点击确定前的情况了
相关文章推荐
- htm页面中<a name>加name和id的冲突附解决方法
- 浅谈html中id和name的区别实例代码
- JavaScript中为元素加上name属性的方法
- js使用for循环及if语句判断多个一样的name
- angularJS 中$attrs方法使用指南
- 简述AngularJS相关的一些编程思想
- AngularJS的一些基本样式初窥
- 创建你的第一个AngularJS应用的方法
- 详解AngularJS中的作用域
- 简介AngularJS的视图功能应用
- AngularJS语法详解
- angularjs中的e2e测试实例
- 简介AngularJS中使用factory和service的方法
- PHP中使用php://input处理相同name值的表单数据
- AngularJS + Node.js + MongoDB开发的基于高德地图位置的通讯录
- 举例讲解AngularJS中的模块
- 使用AngularJS处理单选框和复选框的简单方法
- AngularJS+Node.js实现在线聊天室
- AngularJS的内置过滤器详解
- 详解AngularJS中自定义指令的使用