Angularjs 几个指令的坑
来源:互联网 发布:淘宝培训学校怎么样 编辑:程序博客网 时间:2024/05/29 15:24
一、问题描述
1、AG的两个指令,ngShow和ngIf,这两个属性简单描述一下:
ngShow - - 这个指令可以控制添加的html元素的显示与消失,作用类似于css的dispaly:none和block,
ngIF -- 这个指令效果和ngShow是一样的,不同的是ngIF是直接删除与显示htmt元素,删除Dom;
使用比较简单,重点来了,坑在于ngif使用上需要谨慎,会遇到scope绑定值错误的情况
2、简单的例子
HTML代码
<div ng-show="isshow" style="padding: 10px;border: solid red 1px;"><h1>我是ngshow</h1>
<input ng-model="psd" type="text" id="psd" name="psd" placeholder="输入密码">
<p>密码:{{psd}}</p>
</div>
<div ng-if="isif" style="padding: 10px;border: solid red 1px;">
<h1>我是ngif</h1>
<input ng-model="name" type="text" id="name" name="name" placeholder="输入姓名">
<p>姓名:{{name}}</p>
</div>
<button class="btn btn-primary" ng-click="changeShow()">点击我ngshow变化</button>
<button class="btn btn-primary" ng-click="changeIf()">点击我ngif变化</button>
<p>姓名:{{name}}</p>
<p>密码:{{psd}}</p>
Js:
$scope.isshow = true;
$scope.isif= true;
$scope.changeShow = function() {
$scope.isshow = !$scope.isshow ;
}
$scope.changeIf = function() {
$scope.isif = !$scope.isif ;
}
分析一下代码:
很简单的一段代码,两个div里的内容风格是一致的,通过下面两个按钮控制消失,div里面都有一个输入框,用ng-model绑定了一个值,
我们输入后,发现,ngIF绑定的值是无法显示在外面的p标签外面。
结论:ngIF会影响并阻断scope绑定值,ngshow不会,建议:div里面有很多其他指令如ngmodel的尽量使用ngshow,单个独立的可以使用ngif
这个代码写的很简单,在项目中,经常会遇到,突然拿不到值得情况,好几百html代码,最后发现是滥用了ngif,所以才写此文章。
1 0
- Angularjs 几个指令的坑
- AngularJS的常见指令,来看看你知道几个嘞
- AngularJS指令学习部分遇到的坑
- AngularJs 的指令
- angularjs指令的使用
- AngularJS 风谲云诡的指令
- AngularJS 大雅之堂的指令
- angularjs的指令详解
- AngularJS 内置的指令
- 理解Angularjs的指令
- AngularJS的指令
- AngularJS的常见指令
- AngularJS的指令
- angularjs指令的&=@<?
- 《AngularJS》--指令的相互调用
- AngularJS 优雅的自定义指令
- angularjs自定义指令的用法
- angularjs一些简单的指令
- 让最没用的WIFI变成最好用的WIFI———树莓派搭建VPN服务器
- Spark性能优化指南——基础篇
- 约化方程
- 【android】仿知乎ScrollView滚动改变标题栏透明度
- JAVA学习、JAVA入门:JAVA知识点精简总结
- Angularjs 几个指令的坑
- MySQL函数之CASE WHEN THEN
- The TTY demystified
- 炫酷的渐变背景
- 金蝶KIS商贸版V5.0单据多单位分录+整件散包即时库存表(固定单位换算)
- 如何修改eclipse里面的workspace目录
- enq: TX - allocate ITL entry等待事件
- mfc100u.dll丢失的解决方法
- Kodi ——6 Controls (2) Fade Label Control