AngularJS的常见指令，来看看你知道几个嘞

最新推荐文章于 2019-02-26 21:04:39 发布

Drenched-oldTimes

最新推荐文章于 2019-02-26 21:04:39 发布

阅读量682

点赞数

分类专栏： angular 文章标签： Angular AngularJS AngularJS的常见指令 xss 内置指令

本文链接：https://blog.youkuaiyun.com/sinat_38529191/article/details/71055833

版权

angular 专栏收录该内容

13 篇文章

订阅专栏

本楼主真的是闲不住啊，像我这种爱写东西的，真是一写就停不下来，写完去吃顿大餐补补

那今天说点什么呢，应广大要求，说说经常用到的一些AngularJS中的指令吧。

那AngularJS指令到底是什么呢，接下来咱就好好叙叙~

AngularJS指令

AngularJS的指令
指示，命令：指挥示意要做一件事情！
指令：就是扩展了HTML的基本功能，通过额外的标签、属性来增强HTML功能

Angular的指令在页面中体现出来就是一个标签/属性/class名称/注释等。

常见指令

常见指令，按照指令的功能，划分为五大类
1.控制指令，用于ANGULAR应用程序加载流程控制
2.渲染指令，用于ANGULAR将数据在网页中进行展示/隐藏处理
3.节点指令，用于ANGULAR对标签、属性、样式、内容进行处理的指令、
4.事件指令，用于处理常规事件操作的指令
5.其他指令....

一、控制指令

①ng-app
用于定义Angular应用入口的指令，用于[自动引导]Angular程序的运行
在定义应用程序运行入口的同时，可以绑定一个DOM元素
DOM元素的开始标签和结束标签之间~就可以认为是模块的作用范围

Angular通过ng-app指令，实现自动引导程序运行，底层是通过
bootstrap()进行模块DOM元素加载，开始运行！

有个问题 ====>ng-app 没有模块，可以引导Angular运行吗？

                    <html ng-app>
	                // angular引用可以运行吗？可以运行
	                Angular会将页面中出现的支持的语法进行解释运行！
	                >>但是不能使用模块控制器中定义的/挂载的数据，超出了作用范围！
	            ng-app="模块名称"
                         该模块就会作为Angular的根模块出现，整个作用范围中，页面View和数据Model可以进行无缝交互！
                   </html>

②ng-controller

模块中，可以给模块挂载一个或者多个控制器
挂载好的控制器在当前模块范围内，可以通过ng-controller指令来指定控制器的作用范围

目前常规控制器的做法：
先声明模块
模块下挂载控制器>>> 控制器的作用范围仅限于当前模块！>>>局部控制器
Angular1.2版本以前
控制器的定义，是直接通过全局函数来实现的

         //控制器：全局控制器
            function ctrl($scope) {
                $scope.name = "tom";//挂载数据
            }

全局控制器的意思，是可以在网页中任意地方通过ng-controller进行注册
全局控制器造成了全局数据污染~！所以Angular在1.2版本以后进行了彻底修改
废弃了全局控制器~ 而是提倡使用挂载在模块下的局部控制器！来更好的控制数据！

下面用一段代码说明：

        <body>
		<!-- name被Angular解释为变量，'tom'被解释为变量值 -->
                <!-- name2被Angular解释为变量，n2被解释为变量-->
	    <div ng-init="name='tom';name=n2">
	    	{{name}}****{{name2}}
	    	<div>greeting: <span ng-bind="greeting"></span></div>
	    </div>
	    <!--控制器-->
	    <div ng-app="myApp">
	    	<div ng-controller="myCtrl">
	    		<div>局部控制器范围：<span ng-bind="greeting"></span></div>
	    	</div>
	    	<div ng-controller="myCtrl2">
	    		<div>局部控制器范围：<span ng-bind="greeting"></span></div>
	    	</div>
	    </div>
	    <div id="myApp2">
	    	<div ng-controller="myApp2Ctrl">
	    		<div>局部控制器App2范围：<span ng-bind="hello"></span></div>
	    	</div>
	    	<div ng-controller="myCtrl2">
	    		<div>局部控制器范围：<span ng-bind="greeting"></span></div>
	    	</div>
	    </div>
	</body>

也可以用id引导

用id引导，用angular.bootstrap(document,[])

   <script>
		var app=angular.module("myApp",[]);
		app.controller("myCtrl",["$scope",function($scope){
			$scope.greeting="hello summer";	
		}]);
		app.controller("myCtrl2" , ["$scope", function($scope){
            $scope.greeting = "hello summer!"
          }]);
        
        var app2=angular.module("myApp2");
        app2.controller("myApp2Ctrl",["$scope",function($scope){
            $scope.hello = "my app2 ctrl value";	
        }]);
        
        var _mp2 = document.getElementById("myApp2");
        angular.bootstrap(_mp2, ["myApp2"]);
	</script>

   <script>
		var app=angular.module("myApp",[]);
		app.controller("myCtrl",["$scope",function($scope){
			$scope.greeting="hello summer";	
		}]);
		app.controller("myCtrl2" , ["$scope", function($scope){
            $scope.greeting = "hello summer!"
          }]);
        
        var app2=angular.module("myApp2");
        app2.controller("myApp2Ctrl",["$scope",function($scope){
            $scope.hello = "my app2 ctrl value";	
        }]);
        
        var _mp2 = document.getElementById("myApp2");
        angular.bootstrap(_mp2, ["myApp2"]);
	</script>

二、渲染指令
指令的作用就是将数据，渲染展示到页面上【底层是封装了DOM操作】
* ng-repeat 循环渲染指令
* ng-bind 变量渲染指令，mustache语法的替代写法
接下来详细介绍一下：

首先要引入渲染指令的js ：angular-sanitize.min.js

<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <meta charset="UTF-8">
    <title>渲染指令</title>
    <script src="js/angular.min.js"></script>
    <script src="js/angular-sanitize.min.js"></script>
</head>

文本部分如下：

① ng-repeat

ng-repeat循环渲染指令
属性直接写在要循环的标签上！
u in users u和users就会被Angular解释成变量，获取变量中的值进行处理

index是下标

first：第一个为true 其他为false

last：最后一个为true 其他为false

middle：中间为true 其他为false

even：偶数true

odd：奇数为true

   <ul>
        <li ng-repeat="u in users">
            <span ng-bind="$index+1"></span>
            <span ng-bind="$first"></span>
            <span ng-bind="$last"></span>
            <span ng-bind="$middle"></span>
            <span ng-bind="$even"></span>
            <span ng-bind="$odd"></span>

            <span ng-bind="u.userID"></span>
            <span ng-bind="u.username"></span>
            <span ng-bind="u.nickname"></span>
        </li>
    </ul>

②ng-bind

    <div ng-bind="content"></div>
    <div ng-bind="12 * 12"></div>
    <div ng-bind="true && false"></div>
    <div ng-bind="12 > 10"></div>

③ ng-bind-html

这个指令，类似于原生JS的innerHTML
但是使用的时候一定要慎重，对于它修饰的内容，必须确保安全性
如果内容的来源不确定，不要使用编译html标签的属性或者函数>>>XSS攻击

扩展xss

<body>
输入信息：<input type="text" id="username">
<div>用户输入了：<span id="info"></span></div>
<script>
    username.onkeyup = function() {
        var _value = username.value;
        info.innerHTML = _value;
    }
</script>

④ng-include 包含页面指令
类似于JQuery 中的load()函数，用于加载其他页面

使用的时候注意路径
以上的script部分如下：

    var app = angular.module("myApp", ['ngSanitize']);

    app.controller("myCtrl", ["$scope", function ($scope) {
        $scope.users = [
            {userID: 10001, username: "cat", nickname: "tom"},
            {userID: 10002, username: "mouse", nickname: "jerry"},
            {userID: 10003, username: "mouse", nickname: "shuke"},
            {userID: 10004, username: "mouse", nickname: "beita"}
        ];

        $scope.content = "<p>这是一段内容</p>";
    }]);

扩展：实际项目开发中，对于用户编号、商品编号等等各种编号，通常使用字符串来进行编号
所以使用字符串来表示各种编号，并且编号能在程序中保证编号的唯一性

三、节点指令

主要用于标签、样式、属性、内容的操作

例举几个常用的节点指令

<!DOCTYPE html>
<html ng-app="myApp">
	<head>
		<meta charset="UTF-8">
		<title>节点指令</title>
		<script src="js/angular.min.js" ></script>
         <style>
	        .default{
	            font-size:16px;
	            color:red;
	        }
	        .sky {
	            font-size:18px;
	            color:blue;
	        }
        </style>
	</head>
	<body>
		<div ng-controller="myCtrl">
			<h2>ng-switch</h2>
	                <!--ng-switch **> switch()
		            ng-switch-when  **> case:
		            ng-switch-default **> default
		        -->
		    <div>
		    	<input type="text" ng-model="user"/><!-- user变量 -->
		    	<div ng-switch="user"><!-- user变量 -->
		    		<div ng-switch-when="admin"><!-- admin字符串 -->
		    			 管理员用户登录
		    		</div>
		    		<div ng-switch-when="user">
		    			  会员登录
		    		</div>
		    		<div ng-switch-default>
		    			游客登录
		    		</div>
		    	</div>
		    </div>
		    <hr/>
		    
		    
		    <h2>ng-show ng-hide 用于显示或者隐藏元素的指令</h2>
		    <div>
		    	<input type="checkbox" ng-model="flog"/>
		    	显示？{{flog}}
		    	<div ng-show="flog">
		    		小仙女
		    	</div>
		    	<div ng-hide="flog">
		    		大仙女
		    	</div>
		    </div>
		    
		    <hr/>
		    <h2>ng-if指令：用于判断输出</h2>
		    <div>
		    	<input type="checkbox" ng-model="flogg"/>
		    	用户登录{{flogg}}
		    	<div ng-if="flogg" ng-class="'sky'">
		    		 ng-if指令，会将DOM元素在DOM树上显示或者移除
		    	</div>
		    </div>
		    <hr/>
		    
		    <h1>ng-class指令： {样式名称:布尔类型}</h1>
		    <div>
		     	<div ng-class="{default:def,sky:s}">
		     		从你的全世界绕过
		     	</div>
		     	<input type="checkbox" ng-model="def"/>
		                使用default样式 red修饰{{def}}<br/> 
		        <input type="checkbox" ng-model="s"/>
		                使用default样式 blue修饰{{s}}<br/>        
		    </div>
		    <div>
		    	<div ng-class="['sky']">
		    		从你的全世界路过
		    	</div>
		    </div>
		    <div>
		    	<!-- 通过flag为true/false来指定使用样式default/sky[使用不多：了解] -->
		        <div ng-class="{true:default,false:sky}[flag]">
				        道可道非常道，名可名非常名<br />
				        无名天地之始有名万物之母
                </div>
                <input type="checkbox" ng-model="flag">选中{{flag}}
		    </div>
		    <h2>ng-class-even/odd</h2>
		    <div>
		    	<ul>
                    <li ng-repeat="u in users">
                      <span ng-bind="u" ng-class-even="'default'" ng-class-odd="'sky'"></span>
                    </li>
                </ul>
		    </div>
		    <h2>ng-style</h2>
		    <div>
		    	<button ng-click="sty={color:'orange'}">点击</button>
		        <div ng-click="sty">
		        	ng-style样式，主要用于自定义指令的时候进行样式的处理； 常规使用方式和行内样式没有什么大区别
		        </div>
		    </div>
		    
		    <h2>ng-src:用于在Angular应用中替代img标签的src属性</h2>
                   <h2>ng-href:用于在Angular应用中替代a标签的href属性</h2>
		</div>
	</body>
	<script>
		var app=angular.module("myApp",[]);
		app.controller("myCtrl",["$scope",function($scope){
			$scope.users=[
			   "tom",
			   "jerry",
			   "shuke" ,
			   "beita"
			]
		}]);
	</script>
</html>

五、事件指令

Angular封装的用于操作事件的指令
通常是ng-[event]来命名指令，如ng-click表示单击事件

Angular中的事件处理，需要将处理函数挂载到对应控制器的$scope上

下面的案例中都有解释：

<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/angular.min.js"></script>
</head>
<body>
    <div ng-controller="myCtrl">
        <button ng-click="fn1()">点击执行</button>
        <button ng-click="fn2($event)">点击执行，附带事件对象$event</button>
        <button ng-click="fn2($event, 'tom')">点击执行，多个参数</button>
    </div>
<script>
    var app = angular.module("myApp", [])
        .controller("myCtrl", ["$scope", function($scope) {
            $scope.fn1 = function() {
                alert("事件执行");
            }
            $scope.fn2 = function(event,name) {
                console.log("事件执行了.", event, name);
            }
        }]);
</script>
</body>
</html>

以上就是咱在工作中常用的几种指令，多练练，就不会觉得很难了，要运用到实际的项目中，印象更加深刻！

如果大家有兴趣，我就多写点项目中运用到的知识点分享给大家~

下次见~~~