（6）AngularJS 1.X 與頁(yè)面控制相關(guān)的指令

2024-04-27 15:10:29

字體：大中小

供稿：網(wǎng)友

引言AngularJS控制頁(yè)面元素1 ng-if指令控制頁(yè)面11 代碼實(shí)例2 ng-repeat指令控制頁(yè)面21 代碼實(shí)現(xiàn)3 ng-switch指令控制頁(yè)面31代碼實(shí)現(xiàn)4 ng-show指令控制頁(yè)面41 代碼實(shí)現(xiàn)5 ng-include指令控制頁(yè)面51 ng-include包含頁(yè)面52 ng-include包含模版53 ng-include注意的地方6 ng-bind-html指令控制頁(yè)面61 代碼實(shí)現(xiàn)7 ng-non-bindable 指令控制頁(yè)面71 代碼實(shí)現(xiàn)

1.引言

在本篇博客中主要介紹一下和頁(yè)面控制相關(guān)的指令，其中有ng-repeat指令，ng-include指令，ng-show指令指令，ng-switch指令，ng-if指令，ng-bind-html指令，ng-non-bindable指令，通過這些指令會(huì)讓我們的頁(yè)面變得更加的豐富，接下來我們來看看這些指令如何控制我們的頁(yè)面元素。

2.`AngularJS`控制頁(yè)面元素

2.1 `ng-if`指令控制頁(yè)面

2.1.1 代碼實(shí)例

首先引入AngularJS函數(shù)庫(kù)（略）創(chuàng)建我們的AngularJS的作用域<html ng-app="myApp"> <head> <script src="js/angular.js"></script> <meta charset="utf-8"> </head> <body> </body></html>使用ng-if指令控制頁(yè)面 <div ng-controller="firstController"> <div ng-click="click();">點(diǎn)擊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; } })運(yùn)行結(jié)果（當(dāng)點(diǎn)擊div的時(shí)候，div將不會(huì)顯示,div標(biāo)簽被刪除了）（消失的div）這里寫圖片描述

（div未消失）

2.2 `ng-repeat`指令控制頁(yè)面

使用ng-repeat指令可以在頁(yè)面輸出我們的數(shù)組，同時(shí)ng-repeat指令也提供參數(shù)供我們使用，其中有：$index,$first,$middle,$last,$even，$odd，接下來我們來看看這個(gè)指令應(yīng)該如何使用

2.2.1 代碼實(shí)現(xiàn)

引入AngularJS函數(shù)庫(kù)（略）指定AngularJS作用域<html ng-app="myApp"> <head> <script src="js/angular.js"></script> <meta charset="utf-8"> </head> <body> </body></html>創(chuàng)建控制器，添加一個(gè)數(shù)組變量 var app=angular.module("myApp",[]) app.controller("firstController",function($scope){ $scope.arr=["張三","李四","王五"] })利用ng-repeat指令輸出我們的數(shù)組（同時(shí)看看該指令提供給我們的參數(shù)）<div ng-controller="firstController"> <div> <li ng-repeat="item in arr">{{item}}---{{$index}}--{{$first}}</li> </div> </div>運(yùn)行結(jié)果

這里寫圖片描述

2.3 `ng-switch`指令控制頁(yè)面

通過ng-switch指令我們可以根據(jù)相應(yīng)的需求生成DOM樹，ng-switch和ng-switch-when和ng-switch-default指令結(jié)合使用，接下來我們看一下該指令的使用。

2.3.1代碼實(shí)現(xiàn)

創(chuàng)建控制器 var app=angular.module("myApp",[]) app.controller("firstController",function($scope){ $scope.test="settings" })創(chuàng)建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>運(yùn)行結(jié)果

這里寫圖片描述

2.4 `ng-show`指令控制頁(yè)面

ng-show指令可以控制某標(biāo)簽是否顯示

2.4.1 代碼實(shí)現(xiàn)

html標(biāo)簽實(shí)現(xiàn) <div> <input ng-model="test" type="checkbox"> <div ng-show="test">ng-show實(shí)例</div> </div>運(yùn)行結(jié)果（注意：標(biāo)簽消失并不是被刪除了，而是添加了一個(gè)樣式）

這里寫圖片描述

2.5 `ng-include`指令控制頁(yè)面

通過ng-include指令我們可以將外界的頁(yè)面代碼包含進(jìn)來，ng-include指令可以包含外部的一個(gè)html頁(yè)面，同樣也可以包含一個(gè)html模板，接下來我們就分別來演示一下該命令的使用。

2.5.1 `ng-include`包含頁(yè)面

首先我們創(chuàng)建一個(gè)html，該html的名稱叫做：test.html，內(nèi)容為<h1>new page</h1>在主頁(yè)面中使用ng-include指令（注意：url是一個(gè)變量）<div ng-controller="firstController"> <div ng-include="url"></div> </div>創(chuàng)建我們的控制器 var app=angular.module("myApp",[]) app.controller("firstController",function($scope){ $scope.url="test.html" })運(yùn)行結(jié)果

這里寫圖片描述

2.5.2 `ng-include`包含模版

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

2.5.3 `ng-include`注意的地方

在真實(shí)的開發(fā)中，ng-include指令用的并不是那么多，我們一般使用路由（ngRoute）去加載我們的外部頁(yè)面，單數(shù)路由也有著它自己的缺點(diǎn)。

2.6 `ng-bind-html`指令控制頁(yè)面

關(guān)于ng-bind-html指令的使用，我們需要有一些特殊的設(shè)置，看到ng-bind-html指令，可能會(huì)想到ng-bind指令，ng-bind指令是可以向頁(yè)面輸出文本的，同理ng-bind-html指令也是向頁(yè)面輸出信息的，那么他們兩個(gè)有什么區(qū)別呢？接下來我們用一個(gè)實(shí)例演示一下，假設(shè)我們的控制器中有一個(gè)文本為：$scope.text="<h1>hello world</h1>"，那么我們使用ng-bind輸出一下。

代碼實(shí)現(xiàn)<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>運(yùn)行結(jié)果

這里寫圖片描述

這好像不是我們需要的結(jié)果，我們想要將<h1>標(biāo)簽解析，這應(yīng)該怎么做呢？這要借助我們的ng-bind-html指令。

2.6.1 代碼實(shí)現(xiàn)

引入我們的AngularJS函數(shù)庫(kù)（省略）要想使用ng-bind-html指令我們借助一個(gè)插件，叫做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>創(chuàng)建我們的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>" })運(yùn)行結(jié)果

這里寫圖片描述

2.7 `ng-non-bindable` 指令控制頁(yè)面

在使用AngularJS編寫頁(yè)面的時(shí)候，假設(shè)我們就想輸出一個(gè){{}}怎么辦呢？并不想將{{}}解析為表達(dá)式，這時(shí)候我們就需要用到了ng-non-bindable 指令。接下來我們就來看看該指令的效果。

2.7.1 代碼實(shí)現(xiàn)

我們的html頁(yè)面<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>運(yùn)行結(jié)果（并沒有將{{}}解析為我們的表達(dá)式）

這里寫圖片描述