（6）AngularJS 1.X 与页面控制相关的指令

2024-04-27 15:10:29

字体：大中小

来源：转载

供稿：网友

引言AngularJS控制页面元素1 ng-if指令控制页面11 代码实例2 ng-repeat指令控制页面21 代码实现3 ng-switch指令控制页面31代码实现4 ng-show指令控制页面41 代码实现5 ng-include指令控制页面51 ng-include包含页面52 ng-include包含模版53 ng-include注意的地方6 ng-bind-html指令控制页面61 代码实现7 ng-non-bindable 指令控制页面71 代码实现

1.引言

在本篇博客中主要介绍一下和页面控制相关的指令，其中有ng-repeat指令，ng-include指令，ng-show指令指令，ng-switch指令，ng-if指令，ng-bind-html指令，ng-non-bindable指令，通过这些指令会让我们的页面变得更加的丰富，接下来我们来看看这些指令如何控制我们的页面元素。

2.`AngularJS`控制页面元素

2.1 `ng-if`指令控制页面

2.1.1 代码实例

首先引入AngularJS函数库（略）创建我们的AngularJS的作用域<html ng-app="myApp"> <head> <script src="js/angular.js"></script> <meta charset="utf-8"> </head> <body> </body></html>使用ng-if指令控制页面 <div ng-controller="firstController"> <div ng-click="click();">点击div</div> <div ng-if="flag">div显示</div> </div>编写我们的控制器 var app=angular.module("myApp",[]) app.controller("firstController",function($scope){ $scope.flag=true; $scope.click= function () { $scope.flag=!$scope.flag; } })运行结果（当点击div的时候，div将不会显示,div标签被删除了）（消失的div）这里写图片描述

（div未消失）

2.2 `ng-repeat`指令控制页面

使用ng-repeat指令可以在页面输出我们的数组，同时ng-repeat指令也提供参数供我们使用，其中有：$index,$first,$middle,$last,$even，$odd，接下来我们来看看这个指令应该如何使用

2.2.1 代码实现

引入AngularJS函数库（略）指定AngularJS作用域<html ng-app="myApp"> <head> <script src="js/angular.js"></script> <meta charset="utf-8"> </head> <body> </body></html>创建控制器，添加一个数组变量 var app=angular.module("myApp",[]) app.controller("firstController",function($scope){ $scope.arr=["张三","李四","王五"] })利用ng-repeat指令输出我们的数组（同时看看该指令提供给我们的参数）<div ng-controller="firstController"> <div> <li ng-repeat="item in arr">{{item}}---{{$index}}--{{$first}}</li> </div> </div>运行结果

这里写图片描述

2.3 `ng-switch`指令控制页面

通过ng-switch指令我们可以根据相应的需求生成DOM树，ng-switch和ng-switch-when和ng-switch-default指令结合使用，接下来我们看一下该指令的使用。

2.3.1代码实现

创建控制器 var app=angular.module("myApp",[]) app.controller("firstController",function($scope){ $scope.test="settings" })创建html片段 <div ng-controller="firstController"> <input ng-model="test" type="text"> <div ng-switch on="test"> <div ng-switch-when="settings">settings</div> <div ng-switch-when="home">Home</div> <div ng-switch-default>default</div> </div> </div>运行结果

这里写图片描述

2.4 `ng-show`指令控制页面

ng-show指令可以控制某标签是否显示

2.4.1 代码实现

html标签实现 <div> <input ng-model="test" type="checkbox"> <div ng-show="test">ng-show实例</div> </div>运行结果（注意：标签消失并不是被删除了，而是添加了一个样式）

这里写图片描述

2.5 `ng-include`指令控制页面

通过ng-include指令我们可以将外界的页面代码包含进来，ng-include指令可以包含外部的一个html页面，同样也可以包含一个html模板，接下来我们就分别来演示一下该命令的使用。

2.5.1 `ng-include`包含页面

首先我们创建一个html，该html的名称叫做：test.html，内容为<h1>new page</h1>在主页面中使用ng-include指令（注意：url是一个变量）<div ng-controller="firstController"> <div ng-include="url"></div> </div>创建我们的控制器 var app=angular.module("myApp",[]) app.controller("firstController",function($scope){ $scope.url="test.html" })运行结果

这里写图片描述

2.5.2 `ng-include`包含模版

首先我们创建模版,（模版注意一点：模版必须在angularjs的作用域中）<script type="text/ng-template" id="mytemplate"> <h1>new template</h1></script>创建我们的html <div ng-controller="firstController"> <div ng-include="url"></div> </div>创建我们的控制器 var app=angular.module("myApp",[]) app.controller("firstController",function($scope){ //这里是我们模版id $scope.url="mytemplate" })

2.5.3 `ng-include`注意的地方

在真实的开发中，ng-include指令用的并不是那么多，我们一般使用路由（ngRoute）去加载我们的外部页面，单数路由也有着它自己的缺点。

2.6 `ng-bind-html`指令控制页面

关于ng-bind-html指令的使用，我们需要有一些特殊的设置，看到ng-bind-html指令，可能会想到ng-bind指令，ng-bind指令是可以向页面输出文本的，同理ng-bind-html指令也是向页面输出信息的，那么他们两个有什么区别呢？接下来我们用一个实例演示一下，假设我们的控制器中有一个文本为：$scope.text="<h1>hello world</h1>"，那么我们使用ng-bind输出一下。

代码实现<html ng-app="myApp"><head> <script src="js/angular.js"></script> <meta charset="utf-8"> <script> var app=angular.module("myApp",[]) app.controller("firstController",function($scope){ $scope.text="<h1>hello world</h1>" }) </script></head><body> <div ng-controller="firstController"> <div ng-bind="text"></div> </div></body></html>运行结果

这里写图片描述

这好像不是我们需要的结果，我们想要将<h1>标签解析，这应该怎么做呢？这要借助我们的ng-bind-html指令。

2.6.1 代码实现

引入我们的AngularJS函数库（省略）要想使用ng-bind-html指令我们借助一个插件，叫做ngSanitize，所以我们首先引入我们的插件：<script src="js/angular-sanitize.js"></script>表明我们的AngularJS的作用域<html ng-app="myApp"> <head> <script src="js/angular.js"></script> <script src="js/angular-sanitize.js"></script> <meta charset="utf-8"> </head> <body> </body></html>创建我们的html片段 <div ng-controller="firstController"> <div ng-bind-html="text"></div> </div>编写我们的控制器（注意我们的模块依赖） //注意这里的模块依赖ngSanitize var app=angular.module("myApp",["ngSanitize"]) app.controller("firstController",function($scope){ $scope.text="<h1>hello world</h1>" })运行结果

这里写图片描述

2.7 `ng-non-bindable` 指令控制页面

在使用AngularJS编写页面的时候，假设我们就想输出一个{{}}怎么办呢？并不想将{{}}解析为表达式，这时候我们就需要用到了ng-non-bindable 指令。接下来我们就来看看该指令的效果。

2.7.1 代码实现

我们的html页面<html ng-app="myApp"><head> <script src="js/angular.js"></script> <meta charset="utf-8"> <script> var app=angular.module("myApp",[]) app.controller("firstController",function($scope){ $scope.text="hello world</h1>" }) </script></head><body> <div ng-controller="firstController"> <div ng-non-bindable>{{text}}</div> </div></body></html>运行结果（并没有将{{}}解析为我们的表达式）

这里写图片描述