Angular用来控制元素的展示与否的原生指令介绍
在Angular的原生指令中有这几个指令用来控制元素的展示与否，ng-show/ng-hide/ng-if和ng-switch。
在angular性能优化中，我们也常常会用到它。
我们看下他们的区别。
其中ng-show和ng-hide是一样的，只不过ng-show是满足条件就展示，ng-hide是满足条件就隐藏，下面就不再提到ng-hide。
ng-show
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
ng-if也接收的一个bool值，当它的值为false的时候，它所控制的节点并没有被创建或者说之前的DOM节点会被销毁掉，哪怕这个节点里面包含了很多ng的绑定都不会去执行。所以，我们在项目开发中，如果没有必要一次性加载完的dom就可以用ng-if来阻止ng事件发生，从而也就加快了dom的加载速度。特别是在repeat的时候，每条数据又包含了复杂的数据结构的时候效果特别明显。当它的值为true的时候，就会去创建DOM节点。
所以如果你用指令、模板来渲染额外的信息，例如通过点击来显示列表项的详细信息，一定要使用 ng-if（AngularJSv. 1.1.5以后）。它可阻止渲染（与ng-show相比）。
ng-switch
ng-switch的存在，让我们省去很多麻烦（应该说angular本身就这样）。比如我们之前用传统的方式去做一个tab选项卡。我们要一次次的循环然后在判断当前的状态最后再去执行相应的事情。在angular里面用ng-switch就非常的简单。ng-switch要先监听某一个变量，当此变量为什么值的时候下面就显示什么内容。如上面显示的，监听了type这么一个变量，当type的值等于‘aaa'的时候这块区域就会被创建并显示；当type的值等于‘bbb'的时候，之前'aaa'的dom全部会被销毁，然后'bbb'dom全部创建并显示。
例子 http://jsbin.com/hinehi/1/edit
-
问题内容： 我正在尝试使用AngularJS创建我的第一个应用程序。但是，如果我需要针对特定情况使用指令，我会感到困惑。 我有一个简单的“地图”页面，需要在其中显示所选区域的纬度/经度值。目前，我根本没有使用指令。我在控制器中执行所有操作，并使用局部显示结果。我不打算在其他任何地方重用我的地图视图。这就是为什么我不觉得我需要指令。 另一方面，我读到某个地方，每次您尝试在控制器中操作DOM（我正
-
问题内容： 我有一个具有自己的控制器的指令。请参见以下代码： 这旨在成为错误/通知/警告的通知系统。我想做的是从另一个控制器（不是指令控制器）调用此控制器上的函数。当我这样做时，我还希望我的链接函数检测到某些属性已更改并执行了一些动画。 这是一些代码来举例说明我要的内容： 所以打电话时开启指令控制器，链接功能也应该被触发，执行动画。我该如何实现？ 问题答案： 这是一个有趣的问题，我开始考虑如何实现
-
问题内容： 我可能会考虑将其完全倒退，但是我正在尝试制作三个嵌套指令，让它们称为：屏幕，组件和小部件。我希望窗口小部件能够触发组件中的某些行为，从而触发屏幕中的某些行为。所以： 我可以使用来在小部件的链接fn中要求父组件，但是如何进一步使组件控制器访问其包含的屏幕呢？ 我需要的是WHAT in组件，因此，当您单击小部件的按钮时，它会发出“ screeny！”警报。 谢谢。 问题答案： 您可以通过以
-
问题内容： 我试图在我的Angular项目中将keyup事件附加到指令。这是指令： 这是模板中的html： 我想在链接函数中访问并将keyup事件附加到它。我知道我可以用jQuery来获得它，但是那不是Angular的方法。从dom中获取该元素的正确方法是什么？ 问题答案： 您可以使用Angular’ ‘ 方法轻松完成此操作： 实时示例：http：//jsfiddle.net/cherniv/S7
-
问题内容： 我想知道如何使用此代码段： 我知道这是关于编译阶段的，但是我不明白这一点，所以简短的解释将是非常感谢。 问题答案： 将另一个指令添加到同一元素的指令： 类似答案： 这是一个小矮人：http ://plnkr.co/edit/ziU8d826WF6SwQllHHQq?p=preview 更清洁的解决方案-完全不使用： 矮人：http ://plnkr.co/edit/jY10enUVm3
-
问题内容： 我正在为Angular开发基于UI和排版的指令。在这种情况下，该指令所应用的元素是未知的-从div，span，h1到h5的任何值。 使用模板的原因是我可以向其中添加指令（因此开发人员无需记住指令名称即可）。 我添加属性和重新编译元素的成功有限。但是，添加时没有成功。创建新元素并替换旧元素会带来集成问题（忽略元素上可能存在的其他指令和数据属性），复制这些属性并将其添加到新元素的效果很小。