angularJs1.x <三、ng-bind>
来源:互联网 发布:淘宝店铺运营计划表 编辑:程序博客网 时间:2024/05/02 00:05
在上一节我们说到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,大家可以根据自己需要进行标签选择!修改后则不会出现点击确定前的情况了
- angularJs1.x <三、ng-bind>
- ng-bind
- ng-bind
- ng-init ng-bind
- Angularjs1.x 项目结构
- AngularJS1.x快速入门
- angularjs1.6.x实例教程
- angularjs1.x基础认识
- angularjs1.6.x实例教程
- angular1.x 中的$sce/ng-bind-html用法
- angularJS1 ng-include相同html部分重用
- angularJS1 ng-disabled控制元素是否禁用
- ng-bind ng-bind-html ng-bind-template 区别
- angularJs1.x<二、控制器Controller>
- Angularjs1.x 中的 constant, value
- 关于Angularjs1.x dom ready
- AngularJs1.X 项目文件结构
- 使用angularjs1.x构建前台开发框架(三)——国际化
- 用python加载3ds max场景设置相关参数,渲染,保存输出图,最后退出3dsmax软件
- Python六大开源框架对比:Web2py略胜一筹
- win7设置护眼模式
- JAVA得到当前系统时间
- 线性表的数组表示
- angularJs1.x <三、ng-bind>
- 连接网络
- log4j.xml
- android系统通过图片绝对路径获取URI的三种方法
- iOS Reveal 分析他人的UI界面
- HDU1584 蜘蛛牌(DFS)
- MongoDB Java驱动&Spring实现
- C#分部类和分部方法的使用
- 横竖屏问题总结