AngularJS的常见指令，来看看你知道几个嘞
来源：互联网 发布：淘宝买ps3是新机吗 编辑：程序博客网 时间：2024/05/16 10:02
本楼主真的是闲不住啊，像我这种爱写东西的，真是一写就停不下来，写完去吃顿大餐补补 
那今天说点什么呢，应广大要求，说说经常用到的一些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>以上就是咱在工作中常用的几种指令，多练练，就不会觉得很难了，要运用到实际的项目中，印象更加深刻！
如果大家有兴趣，我就多写点项目中运用到的知识点分享给大家~
下次见~~~
- AngularJS的常见指令，来看看你知道几个嘞
- 来看看以下必须知道的linux指令，你掌握了几个
- 你应该知道----写的不错，转来看看
- 你真的了解Trump？来看看这几个故事
- 你知道如何增加外链吗快来看看？
- AngularJS的常见指令
- Angularjs 几个指令的坑
- 学会这几个.你就能成为bat脚本小子了...(转来看看的)
- VS中常见的扩展名，看看你知道几个？
- VS中常见的扩展名，看看你知道几个？
- 常见的开源项目协议你知道几个？
- AngularJS入门 、AngularJS控制器 、AngularJS常见的内置指令
- 希望你来看看.....
- 常见的几个汇编指令
- 你知道用AngularJs怎么定义指令吗？
- 你知道用AngularJs怎么定义指令吗？
- 你知道用AngularJs怎么定义指令吗？
- 不知道什么原因 突然又来看看的欲望
- Node.js 适配器模式
- Svn环境搭建
- 虚拟机下三种网络模式
- 碎片知识点-01
- 一些linux的实用小知识
- AngularJS的常见指令，来看看你知道几个嘞
- Find Mode in Binary Search Tree
- 线性表篇之顺序表
- JavaScript变量提升
- JavaScript学习笔记
- vim 常用命令
- clippingNode 新手引导
- Centos 6.8升级内核到3.10 安装Docker
- hdu5974——A Simple Math Problem(gcd推导+数学+解方程组)
