走进AngularJs(二) ng模板中常用指令的使用方式 - 吕大豹 - 推酷
走进AngularJs(二) ng模板中常用指令的使用方式 - 吕大豹
通过使用模板，我们可以把model和controller中的数据组装起来呈现给浏览器，还可以通过数据绑定，实时更新视图，让我们的页面变成动态的。ng的模板真是让我爱不释手。学习ng道路还很漫长，从模板开始入手是个不错方式，因为这部分内容相对简单好理解，而且是视图层的东西，大家都喜欢可以立马看得见的东西嘛。本篇我将搜罗模板中的常用指令一一测试，了解其使用方法，有点像背单词的感觉，会比较枯燥。不过对于初学，这样的枯燥是必须要经历的，开始~
一、模板中可使用的东西及表达式
模板中可以使用的东西包括以下四种：
指令(directive)。ng提供的或者自定义的标签和属性，用来增强HTML表现力。
标记(markup)。即双大括号{{}}，可将数据单向绑定到HTML中。
过滤器(filter)。用来格式化输出数据。
表单控制。用来增强表单的验证功能。
其中，指令无疑是使用量最大的，ng内置了很多指令用来控制模板，如ng-repeat，ng-class，也有很多指令来帮你完成业务逻辑，如ng-controller,ng-model。过滤器通常是伴随标记来使用的，将你model中的数据格式化为需要的格式。表单的控制功能主要涉及到数据验证以及表单控件的增强。
在这里有必要说明一下表达式的概念，毕竟我们模板中大部分使用的都是变量。ng中的表达式与javascript表达式类似但是不可以划等号，它是ng自己定义的一套模式。表达式可以作为指令的值，如ng-modle=”people.name”、ng-click=”showMe()”，看起来是如此像字符串，故而也叫字符串表达式。也可以在标记中使用表达式，如{{1+2}}，或者与过滤器一起使用{{1+2 | currency}}。在框架内部，字符串不会简单的使用eval()来执行，而是有一个专门的$parse服务来处理。在ng表达式中不可以使用循环语句、判断语句，事实上在模板中使用复杂的表达式也是一个不推荐的做法，这样视图与逻辑就混杂在一起了。
二、样式相关的指令
既然模板就是普通的HTML，那我首要关心的就是样式的控制，元素的定位、字体、背景色等等如何可以灵活控制。下面来看看常用的样式控制指令。
ng-class用来给元素绑定类名，其表达式的返回值可以是以下三种：
1) 类名字符串，可以用空格分割多个类名，如’redtext boldtext’；
2) 类名数组，数组中的每一项都会层叠起来生效；
3) 一个名值对应的map，其键值为类名，值为boolean类型，当值为true时，该类会被加在元素上。
下面来看一个使用map的例子：
ng-class测试
map:{redtext:{{red}}, boldtext:{{bold}}, striketext:{{strike}}}
如果你想拼接一个类名出来，可以使用插值表达式，如：
&div class=”{{style}}text”&字体样式测试&/div&
然后在controller中指定style的值：
注意我用了class而不是ng-class，这是不可以对换的，官方的文档也未做说明，姑且认为这是ng的语法规则吧。
与ng-class相近的，ng还提供了ng-class-odd、ng-class-even两个指令，用来配合ng-repeat分别在奇数列和偶数列使用对应的类。这个用来在表格中实现隔行换色再方便不过了。
ng-style用来绑定元素的css样式，其表达式的返回值为一个js对象，键为css样式名，值为该样式对应的合法取值。用法比较简单：
&div ng-style=&{color:'red'}&&ng-style测试&/div&
&div ng-style=&style&&ng-style测试&/div&
$scope.style = {color:'red'};
3. ng-show，ng-hide
对于比较常用的元素显隐控制，ng也做了封装，ng-show和ng-hide的值为boolean类型的表达式，当值为true时，对应的show或hide生效。框架会用display:block和display:none来控制元素的显隐。
三、表单控件功能相关的
对于常用的表单控件功能，ng也做了封装，方便灵活控制。
ng-checked控制radio和checkbox的选中状态
ng-selected控制下拉框的选中状态
ng-disabled控制失效状态
ng-readonly控制只读状态
以上指令的取值均为boolean类型，当值为true时相关状态生效，道理比较简单就不多做解释。
&上面的这些只是单向绑定，即只是从数据到模板，不能反作用于数据。要双向绑定，还是要使用&
四、事件绑定相关
事件绑定是javascrpt中比较重要的一部分内容，ng对此也做了详细的封装，正如我们之前使用过的ng-click一样，其他事件的指令如下：
事件绑定指令的取值为函数，并且需要加上括号，例如：
&select ng-change=”change($event)”&&/select&
然后在controller中定义如下：
$scope.change = function($event){
alert($event.target);
//……………………
在模板中可以用变量$event将事件对象传递到controller中。
对于ng的这种设计，一些人有所质疑，视图与事件绑定混在一起到底好不好？我们不是要讲究视图与逻辑分离吗？如此一来，把事件的绑定又变回了内联的，岂不是历史的倒退。我也一样对此表示不解，因为不写onclick已经很多年。。。但既然已经存在了，我们不妨往合理的方向上想一想，或许ng的设计者压根就不想让模板成为单纯的视图层，本来就是想增强HTML，让它有一点业务能力。这么想的话似乎也能想通，好吧，先欺骗一下自己吧~
五、特殊的ng-src和ng-href
在说明这两个指令的特殊之前，需要先了解一下ng的启动及执行过程，如下图：
1) 浏览器加载静态HTML文件并解析为DOM；
2) 浏览器加载angular.js文件；
3) angular监听
DOMContentLoaded
&事件，监听到时开始启动；
4) angular寻找ng-app指令，确定作用范围；
5) 找到app中定义的Module使用$injector服务进行依赖注入；
6) 根据$injector服务创建$compile服务用于编译；
7) $compile服务编译DOM中的指令、过滤器等；
8) 使用ng-init指令，将作用域中的变量进行替换；
9) 最后生成了我们在最终视图。
可以看到，ng框架是在DOMcontent加载完毕后才开始发挥作用。假如我们模板中有一张图片如下：
&img src=”{{imgUrl}}” /&
那么在页面开始加载到ng编译完成之前，页面上会一直显示一张错误的图片，因为路径{{imgUrl}}还未被替换，就像这样：
为了避免这种情况，我们使用ng-src指令，这样在路径被正确得到之前就不会显示找不到图片。同理，&a&标签的href属性也需要换成ng-href，这样页面上就不会先出现一个地址错误的链接。
顺着这个思路再多想一点，我们在模板中使用{{}}显示数据时，在ng编译完成之前页面上岂不是会显示出大括号及里面的表达式？确实是这样。为了避免这个，ng中有一个与{{}}等同的指令:ng-bind，同样用于单向绑定，在页面刚加载的时候就不会显示出对用户无用的数据了。尽管这样你可能不但没舒心反而更纠结了，{{}}那么好用易理解，还不能用了不成？好消息是我们依然可以使用。因为我编写的是单页面应用，页面只会在加载index.html的时候出这个问题，只需在index.html中的模板中换成ng-bind就行。其他的模板是我们动态加载的，就可以放心使用{{}}了。
六、总结一下
& & & & &枯燥的内容终于写完！~在写这篇文章之前我就在纠结，写这样的内容是不是有点多余，因为这些东西在angular官网(
)一看就明白，而且在线示例也写的很棒。本着不急于求成的原则我还是决定先把这些东西都试一试吧，所以就有详有略的介绍了以上内容，必要的时候也可以当一个备忘。
&&&&&&&& 学英语有两种方法，一种是先做题，遇到不会的单词再查，另一种是先拿着单词本背。尽管专家好像更推荐前者，但如果你现在一窍不通，还是老老实实先背单词吧~
已发表评论数()
请填写推刊名
描述不能大于100个字符!
权限设置： 公开
仅自己可见
正文不准确
标题不准确
排版有问题
主题不准确
没有分页内容
图片无法显示
视频无法显示
与原文不一致(十四)ng-if与ng-show、ng-hide指令的区别和注意事项
(十四)ng-if与ng-show、ng-hide指令的区别和注意事项
angularJS中的ng-show、ng-hide、ng-if指令都可以用来控制dom元素的显示或隐藏。ng-show和ng-hide根据所给表达式的值来显示或隐藏HTML元素。当赋值给ng-show指令的值为false时元素会被隐藏，值为true时元素会显示。ng-hide功能类似，使用方式相反。元素的显示或隐藏是通过改变CSS的display属性值来实现的。
&div ng-show=&2 + 2 == 5&&
2 + 2 isn't 5, don't show
&div ng-show=&2 + 2 == 4&&
2 + 2 is 4, do show
ng-if指令可以根据表达式的值在DOM中生成或移除一个元素。如果赋值给ng-if的表达式的值是false，那对应的元素将会从DOM中移除，否则生成一个新的元素插入DOM中。ng-if同no-show和ng-hide指令最本质的区别是，它不是通过CSS显示或隐藏DOM节点，而是删除或者新增结点。
&div ng-if=&2+2===5&&
Won't see this DOM node, not even in the source code
&div ng-if=&2+2===4&&
Hi, I do exist
ng-if重新创建元素时用的是它们编译后的状态。如果ng-if内部的代码加载之后被jQuery修改过（例如用.addClass），那么当ng-if的表达式值为false时，这个DOM元素会被移除，表达式再次成为true时这个元素及其内部的子元素会被重新插入DOM，此时这些元素的状态会是它们的原始状态，而不是它们上次被移除时的状态。也就是说无论用jQuery的.addClass添加了什么类都不会存在了。而ng-show和ng-hide则可以保留dom元素上次修改后的状态。
当一个元素被ng-if从DOM中移除，同它关联的作用域也会被销毁。而且当它重新加入DOM中时，会通过原型继承从它的父作用域生成一个新的作用域。也就是说ng-if会新建作用域，而ng-show和ng-hide则不会。
&html ng-app&
&script src=&angular-1.2.25.js&&&/script&
function myController($scope)
$scope.keyworld = &&;
&body ng-controller=&myController&&
&input type=&text& ng-model=&keyworld&&
&input type=&button& value=&clear& ng-click=&keyworld=''& ng-show=&keyworld !='' &&
&/body&这段代码默认情况下clear按钮不显示；当在text中输入内容时，clear按钮会显示；点击clear按钮时，会清空text中的内容，同时隐藏clear按钮。可以看到使用ng-show和ng-hide功能完全正常。如果将ng-show改成ng-if，点击clear按钮的时候，不能清空text中的内容，也不能隐藏clear按钮。这是因为ng-if会新建或者销毁作用域，很类似于javascript的原型继承。可以参考这2篇文章：
StackOverflow上，也有人提问ng-if和ng-show的差别。这里直接附上结论:
ng-if&will
remove elements from DOM. This means that all your handlers or anything else attached to those elements will be lost. For example, if you bound a click handler to one of child elements, when&ng-if&evaluates
to false, that element will be removed from DOM and your click handler will not work any more, even after&ng-if&later
evaluates to true and displays the element. You will need to reattach the handler.ng-show/ng-hide&does
not remove the elements from DOM. It uses CSS styles to hide/show elements (note: you might need to add your own classes). This way your handlers that were attached to children will not be lost.ng-if&creates
a child scope while&ng-show/ng-hide&does
Elements that are not in the DOM have less performance impact and your web app might appear to be faster when using&ng-if&compared
to&ng-show/ng-hide.
In my experience, the difference is negligible. Animations are possible when using both ng-show/ng-hide and ng-if, with examples for both in the Angular documentation.
我的热门文章
即使是一小步也想与你分享最近在做一个项目改版，第一次在项目中真正使用Angular,和平时自己写写小demo,做做练习的感觉还是非常不同的，感觉非常的新鲜。有几个指令是经常用到的，这里由于这几个有点共性，所以一起介绍一下ng-if,ng-show/ng-hide,ng-switch 这几个指令。
这里个指令都是Angular框架提供给我们的设置页面内容显示和隐藏的方法，使用起来非常方便，尤其是做业务逻辑。
都是通过一个表达式的值来实现切换显示的，只不过 ng-switch 可以是其他值，ng-if ng-show 就必须是 boolen了。
我在使用过程中发现一个小技巧，我们通过表达式设置 ng-if 或者 ng-show 直接在页面中定义一个表达式，这个时候它的值其实是undefined，由于 ！== true 所以这部分默认也是隐藏。
那么既然是不同指令，就各自有专攻，那我们就来看看他们分别都有什么果实能力。。。(不看海贼的可以无视哈~~)
各自的果实能力
ng-show/ng-hide
在用原生js 或者 jquery的时候，我们一般都可以定义一个类，通过添加和删除这个类来实现元素的显示和隐藏切换。其实这部分从网上参考资料来看，Angular也是这样实现的，根据表达式正确与否，动态添加或者删除 ng-hide 这个Angualr预先定义好的class。调用方式具体如下：
可以是设置一个变量
&div ng-show='show'&&/div&
也可以是直接使用 true / false
&div ng-show='true'&&/div&
对于变量，我们在js 中直接设置这个值就可以。
这个指令的特性是，即使我们暂时隐藏这部分内容，它也会被dom 渲染。
使用方式也是设置一个表达式：
可以是设置一个变量
&div ng-if='more'&&/div&
也可以是直接使用 true / false
&div ng-if='true'&&/div&
对于变量，我们在js 中直接设置这个值就可以。
这是一个能帮我们节省效率的指令，如果表达式值 === false , 则这部分不会在dom中渲染，或者原有的内容会被从dom中删除。所以如果有一部分内容，不需要一开始就显示，我们可以先用ng-if 让它隐藏。例如一个显示更多的下拉按钮，刚开始不显示的部分，可以ng-if 来设置，等我们点击了更多按钮，再设置ng-if = true 既可。这样子减少了页面渲染事件，提高了效率呢。
还有一个特性，ng-if 或创建自己的 scope，它通过原型继承父级的scope。一个典型的例子来自于参考资源1。
还有一个小坑，$scope上面我可以直接给一个属性赋值如：
$scope.showpage = 'abut'
但是如果直接赋值一个对象，对不起，需要先声明，再给对象添加属性
$scope.data = {};
$scope.data.showpage = 'about';
使用方式比前前两个复杂一点，不过也非常直观，类似原生js 中的switch 函数：
在外层父级元素设置 ng-switch 为一个表达式A ，那么他的子元素相当于几个不同的选项，表达式A 对应哪个子元素的 ng-switch-with 值，就显示那部分。
&div ng-switch='showpart'&
&div ng-switch-default&&/div&
&div ng-switch-with='home'&&/div&
&div ng-switch-with='blog'&&/div&
&div ng-switch-with='about'&&/div&
&div ng-switch-with='contact'&&/div&
这也是一个能帮我们节省效率的指令。和ng-if 一样，一开始如果不等于父级的 ng-switch 表达式的值，则不会在页面渲染的，而且我们也可以通过 ng-switch-default 来设置默认的显示部分。比如以往常见的 Tab 选项卡，用这个指令实现起来就非常的容易。
这里有一点疑问，因为我在项目中，做的单页面应用，所有不同部分都在一个页面里面。那么我经常需要根据不同的ajax返回值，显示不同的部分，（特殊原因不能使用路由），所以我这里就是用的 ng-switch 指令，根据不同返回值，显示不同部分。虽然也能实现按需显示，但看到有文章说这样使用 ng-switch 并不是很妥当，路过的朋友，有了解的可以指点我一下！我在这先谢过了~~
后面我会继续分享Angular在项目开发中的经验，以及遇到的坑！
参考资料中回答的非常精彩，也有实例，有兴趣也可以看下！
阅读(...) 评论()AngularJS的学习-ng-show/ng-hide/ng-if跟ng-switch - JavaScript当前位置:& &&&AngularJS的学习-ng-show/ng-hide/ng-if跟ng-switchAngularJS的学习-ng-show/ng-hide/ng-if跟ng-switch&&网友分享于：&&浏览：1次AngularJS的学习--ng-show/ng-hide/ng-if和ng-switch在Angular的原生指令中有这几个指令用来控制元素的展示与否，ng-show/ng-hide/ng-if和ng-switch。
在angular性能优化中，我们也常常会用到它。
我们看下他们的区别。
其中ng-show和ng-hide是一样的，只不过ng-show是满足条件就展示，ng-hide是满足条件就隐藏，下面就不再提到ng-hide。
ng-show接收的一个bool值，当为true的时候就会被触发去展示DOM节点。当ng-show的值为false的时候，在DOM节点上添加了一个ng-hide的一个类，这个类的表达式就是&display：none&。DOM load的时候ng-show里面的所有节点都会被加载。也就是说，ng-show仅仅是影藏和显示了DOM节点。也就意味如果油太多的ng-show指令，即使他们不显示，但他们所在的DOM节点还是会被渲染的。
ng-if也接收的一个bool值，当它的值为false的时候，它所控制的节点并没有被创建或者说之前的DOM节点会被销毁掉，哪怕这个节点里面包含了很多ng的绑定都不会去执行。所以，我们在项目开发中，如果没有必要一次性加载完的dom就可以用ng-if来阻止ng事件发生，从而也就加快了dom的加载速度。特别是在repeat的时候，每条数据又包含了复杂的数据结构的时候效果特别明显。当它的值为true的时候，就会去创建DOM节点。
所以如果你用指令、模板来渲染额外的信息，例如通过点击来显示列表项的详细信息，一定要使用&&ng-if（AngularJSv.&1.1.5以后）。它可阻止渲染（与ng-show相比）。
ng-switch的存在，让我们省去很多麻烦（应该说angular本身就这样）。比如我们之前用传统的方式去做一个tab选项卡。我们要一次次的循环然后在判断当前的状态最后再去执行相应的事情。在angular里面用ng-switch就非常的简单。ng-switch要先监听某一个变量，当此变量为什么值的时候下面就显示什么内容。如上面显示的，监听了type这么一个变量，当type的值等于&aaa&的时候这块区域就会被创建并显示；当type的值等于&bbb&的时候，之前'aaa'的dom全部会被销毁，然后'bbb'dom全部创建并显示。
12345678910
12345678910
12345678910 上一篇：下一篇：文章评论相关解决方案 12345678910 Copyright & &&版权所有如何使用AngularJS的ngShow和ngHide - 推酷
如何使用AngularJS的ngShow和ngHide
今天我们来看看怎样使用Angular的
指令来完成它们听起来应该完成的，显示和隐藏！
它们应该做的事
ngShow 和ngHide 允许我们显示或隐藏不同的元素。这有助于创建Angular应用时因为我们的单页程序会有许多的移动部件随着应用状态的改变而来来去去。
这些指令的最伟大的部分就是我们不必使用CSS或者JS来操作显示还是隐藏。这些都是由老练的Angular来完成。
想使用ngShow 或ngHide, 只需将指令添加到你想要显示或者隐藏的元素上即可。
&!-- for true values --&
&this is a welcome message&/
&!-- can also show if a value is false --&
&this is a goodbye message&/
&appState == 'goodbye'&
&this is a goodbye message&/
&checkSomething()&
一旦我们设置了我们标记，我们可以多种方式设置hello或者goodbye。你可以将它设置到你的Angular控制器里并且让你的div在应用加载的时候显示或隐藏。
上面的这些都可以用于ng-show或者ng-hide。如果值或表达式或函数返回true，则会隐藏一些东西。
用作布尔值
我们将创建使用ng-click的链接，并切换goCats的值为
&goCats = !goCats&
&Toggle Cats&/
然后我们可以使用
显示或隐藏分类图像。
&/vkW3Lhe.jpg&
我们使用ng-src来调用图片，这样的话Angular将在实例化及检查图像时确认是否将其隐藏。如果我们不这样的话，图片会在站点加载时弹出来，直到Angular意识到应该将其隐藏。
判断表达式
在这里我们来判断一个从输入框传来的字符串，我们把ng-mode绑定在一个输入框的里面并命名为aminal变量，并根据这个变量的内容来显示不同的图片。
下面我们会把我们的变量名焦作aminal。
然后我们会使用ng-show来对字符串进行判断。
&/vkW3Lhe.jpg&
&aminal == 'cat'&
我们会做一个简单的检查来判断输入的是奇数还是偶数。 我们会创建一个方法在我们的AngularJS文件中：
$scope.myNumber = 0;
$scope.isEven =
(value % 2 == 0)
方法创建完成之后, 我们接下来要做的就是通过ng-show或者ng-hide来使用它，并传入我们的数字。通过方法传数字这种方法，可以保持Angular控制整洁和可测试。
&isEven(myNumber)&
&The number is even.&/
&!isEven(myNumber)&
&The number is odd.&/
有了这两个方向的指引,我们的应用会有很大的改观. 而这些只是基于
,实现的元素显示和隐藏功能 但这三种模式将能应用到更多的场景.
希望本文能帮助你构建更好的AngularJS应用.在后续的文章中我们会介绍 ngShow 和 ngHide 以创建更多动态展示的应用.
已发表评论数()
请填写推刊名
描述不能大于100个字符!
权限设置： 公开
仅自己可见
正文不准确
标题不准确
排版有问题
主题不准确
没有分页内容
图片无法显示
视频无法显示
与原文不一致}