本文描述使用AngularJS提供的ng-show和ng-hide指令实现自动监听某布尔型变量来改变元素显示状态。
控制html元素显示和隐藏有n种方法：html的hidden、css的display、jquery的hide()和show()、bootstrap的.hide。今天的重点不是显示和隐藏，而是监听某个布尔变量值，自动改变元素显示和隐藏状态。监听函数、if判断、选择dom、设置dom，5行代码搞不定吧，而且毫无技术含量。
&!DOCTYPE html&
&html ng-app&
&meta charset="utf-8"&
&title&ng-show and ng-hide directives&/title&
&div ng-controller="VisibleController"&
&p ng-show="visible"&字符串1&/p&
&p ng-hide="visible"&字符串2&/p&
&button ng-click="toggle()"&切换&/button&
&script src="../lib/angularjs/1.2.26/angular.min.js"&&/script&
function VisibleController($scope) {
$scope.visible =
$scope.toggle = function () {
$scope.visible = !$scope.
两个指令很简单，只是ng-show在true时显示，false时隐藏，而ng-hide效果相反。
& 开源中国(OSChina.NET) |
开源中国社区(OSChina.net)是工信部
指定的官方社区求助，关于angular在指令中无法获取子元素的问题_百度知道
求助，关于angular在指令中无法获取子元素的问题
我有更好的答案
把现在项目中jquery得部分用angularJS重写一遍，刚好手上这个项目用jquery的方法写了一半实在是不能对jquery的ajax方法和基于页面dom的各种取值，决定试试很久以前自学的angularJS、传值方法满意（虽然jquery已经解救过我一次了）
其他类似问题
为您推荐：
等待您来回答
下载知道APP
随时随地咨询
出门在外也不愁Angular用来控制元素的展示与否的原生指令介绍
投稿：hebedich
字体：[ ] 类型：转载 时间：
这篇文章主要介绍了Angular用来控制元素的展示与否的原生指令的用法及区别，非常详细，这里推荐给小伙伴们
在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
最近更新的内容
常用在线小工具Angularjs 中，在控制器中如何调用指令 - V2EX
V2EX = way to explore
V2EX 是一个关于分享和探索的地方
已注册用户请 &
Angularjs 中，在控制器中如何调用指令
10:13:03 +08:00 · 4004 次点击
大家好： 刚学Angularjs，现在遇到了一个问题。想请叫下大家：应用场景： 在app中我写了一个发送验证码的指令。然后在我的业务流程中，有个步骤是输入验证码的流程，所有我在那个页面调用了之前写好的指令。但是当用户输入验证码后，如果后端的接口返回的还是在发送验证吗的话，页面还是在此页面中。由于之前发送验证码有60s 的时间，所有用户点击按钮后，会发现什么都没有发生，感觉很奇怪。所有我想在指令中添加一个reset方法，让验证码重置下。但是我在我的controller 里面，注入指令。提示报错。应该是controller中无法注入directive 吧。所以。想请教下大家。我的这种需求在Angular中如何处里好？
& & 10:30:09 +08:00
我把你文中的“所有”翻译成了“所以”，但还是不能完全看明白。
“如果后端的接口返回的还是在发送验证吗的话，页面还是在此页面中。由于之前发送验证码有60s 的时间，所有用户点击按钮后，会发现什么都没有发生”
这段话能描述得更具体些吗，还有报的什么错也贴一下。
& & 10:41:50 +08:00
这儿有个较好的例子：
重点看一下“内部动作”和“外部作用域交互”的内容。
& & 10:53:57 +08:00
这样描述吧：用户进入页面A，页面A中有一个填写手机的文本框和一个发送验证码的按钮，还有提交按钮。当用户填写完手机号，点击发送验证码后，然后再点击提交按钮。提交按钮后ajax从后端去判断用户输入是否正确，在后端接口中有一个nextAction 参数。如果nextAction=2，则提示用户需要再次输入验证码。还是在呆页面A中。如果操作在60S之内的话，之前第一点击发送验证码按钮的文字会是“还剩下多少s”，这样对用户来说太突兀。所以我想到的解决方法是，在第一点击提交按钮，从后端拿到数据后，调用按钮指令的reset方法。但是尝试在controller里面注入指令，提示，不能使用注入的指令。
& & 11:19:32 +08:00
虽然你文字写得很多，但看的人还是一头雾水， netxAction=2 和操作在60S之内是什么关系？什么叫“第一点击发送验证码”？
你的需求用 angular 完全能实现，使用指令来实现思路也正确，但是，并不存在 controller 注入指令这回事儿，.controller 和 .directive 都是 module 的方法，controller 的作用是维持 $scope 对象，实现和 view 上的 ngModel 的双向绑定.
你只需要正确的实现一个自定义指令就可以了。你所说的 reset 完全可以用指令内的方法去处理。
& & 12:29:38 +08:00
真心抱歉！我文字表达不清楚。Angular初学者，谢谢你的回复。我再想想！
& & 12:49:51 +08:00
问题解决啦。在指令中$watch 监控model值的变化，根据新值做判断，就可以啦。
& · & 1134 人在线 & 最高记录 1893 & · &
创意工作者们的社区
World is powered by solitude
VERSION: 3.9.7.3 · 45ms · UTC 08:59 · PVG 16:59 · LAX 01:59 · JFK 04:59? Do have faith in what you're doing.AngularJs-指令和控制器交互
　　前段时间我们学习了angular的指令，他通过ECMA的方式创建元素，可以让我们共用这些元素，我们也知道可以通过 link的方法给这个指令添加一些动作事件，本节，我们将写入和让angular的指令能和控制器进行交互。
1，指令和控制器的交互
&!DOCTYPE &
&html ng-app=&MyController&&
& & &meta charset=&utf-8&&
& & &title&指令复用&/title&
& & &div ng-controller=&MyCtrl&&
& & & & &loader&滑动加载&/loader&
& & &/div&
&script src=&js/angular-1.3.0.js&&&/script&
&script src=&js/directive-controller.js&&&/script&
上面的代码平淡无奇，有个控制器有个指令（loader），下面可以看到我们通过 directive创建了这个指令，并且我们通过link的方法给他赋值鼠标事件(mouseenter)。
var myModule = angular.module('MyController',[]);
myModule.controller('MyCtrl',function($scope){
& & $scope.loadData = function(){
& & & & console.log(&加载数据...&);
myModule.directive('loader',function(){
& & return{
& & & & restrict:'AE',
& & & & link:function(scope,element,attr){
& & & & & & element.bind('mouseenter',function(){
& & & & & & & & &scope.loadData();
& & & & & & })
我们来看看运行的结果，ok，我们打印出来 &加载数据...&。
2，多个控制器如何公用一个指令？
　　我们创建指令的目的就是在于，能够复用它，当然这也是MVC的终极思想。
　　我们的代码也发生了一些变化
&!DOCTYPE html&
&html ng-app=&MyController&&
& & &meta charset=&utf-8&&
& & &title&指令复用&/title&
& & &div ng-controller=&MyCtrl&&
& & & & &loader loadDataFn=&loadData()&&滑动加载&/loader&
& & &/div&
& & &div ng-controller=&MyCtr2&&
& & & & &loader loadDataFn=&loadData2()&&滑动加载2&/loader&
& & &/div&
&script src=&js/angular-1.3.0.js&&&/script&
&script src=&js/directive-controller.js&&&/script&
首先，我们创建了两个控制器 MyCtr1 和 MyCtr2，同时呢，我们给 loader 这个指令，加了一个自定义的属性叫 loadDataFn，给他赋的值是下面js中的两个对应控制器中的方法loadData()和loadData2()；
var myModule = angular.module('MyController',[]);
myModule.controller('MyCtrl',function($scope){
& & $scope.loadData = function(){
& & & & console.log(&加载数据...&);
myModule.controller('MyCtr2',function($scope){
& & $scope.loadData2 = function(){
& & & & console.log(&加载数据2...&);
myModule.directive('loader',function(){
& & return{
& & & & restrict:'AE',
& & & & link:function(scope,element,attr){
& & & & & & element.bind('mouseenter',function(){
& & & & & & & & // scope.loadData();
& & & & & & & & // scope.$apply(&loadData()&);
& & & & & & & & scope.$apply(attr.loaddatafn);
& & & & & & })
当然，在指令的 link方法中我们也做了改变，link方法呢，给我提供了四个参数:scope、element、attr和父控制器。我们给元素绑定事件也是通过参数中的 element.bind()完成的，我们也可以通过 attr 属性获取指令上的属性，然后通过$apply的方法来完成调用就好了。在此要提交大家的是，我们在获取指令元素上的属性的时候，一定要注意，我们要把属性的名字写成小写的，这是angularJS的坑。
(window.slotbydup=window.slotbydup || []).push({
id: '2467140',
container: s,
size: '1000,90',
display: 'inlay-fix'
(window.slotbydup=window.slotbydup || []).push({
id: '2467141',
container: s,
size: '1000,90',
display: 'inlay-fix'
(window.slotbydup=window.slotbydup || []).push({
id: '2467143',
container: s,
size: '1000,90',
display: 'inlay-fix'
(window.slotbydup=window.slotbydup || []).push({
id: '2467148',
container: s,
size: '1000,90',
display: 'inlay-fix'