今天要说的是AngularJS里面的指令

AngularJs第三讲

指令：就是扩展了HTML的基本功能，通过额外的标签、属性来增强HTML功能，按照常见的指令，可以把指令划分为五大类，分别是控制指令、渲染指令、节点指令、事件指令、其他指令。。。。

1、控制指令：用于ANGULAR应用程序加载流程控制

2、渲染指令：用于ANGULAR将数据在网页中进行展示或隐藏处理

3、节点指令：用于ANGULAR标签、属性、样式内容进行处理的指令

4、事件指令：用于ANGULAR处理常规事件操作的指令

分析各个指令的用法

1、控制指令

1、控制指令-ng-app：

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

Angular通过ng-app指令，实现自动引导运行，底层是通过Bootstrap()进行模块加载，开始运行。

在这里有个重要的问题要说，ng-app没有模块，Angular也是阔以运行哒！Angular会将页面上出现的支持的语法进行解释运行！但是。但是。但是。重要的问题说三遍，不能使用模块控制器中定义的或者挂载的数据，因为超出了范围。

ng-app="模块名称"，该模块作为模块控制器的根模块出现，整个作用范围中，页面View和数据Model可以进行无缝交互

1、控制指令-ng-controller：

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

ng-controller的做法为：

（1）首先要先声明模块

（2）模块下挂载控制器

（3）设置挂载控制器的数据

var app=angular.module("myApp",[])
myApp为模块
app.controller("myCtrl",function($scope){
myCtrl为模块控制器
$scope.name=""
$scope.挂载数据
})

以下为例子

<body><!-- name被Angular解释为变量，'tom'被解释为变量值 --><!-- name2被Angular解释为变量，n2被解释为变量--><div ng-init="name='tom';name2=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><script>var app = angular.module("myApp", []);app.controller("myCtrl" , ["$scope", function($scope){$scope.greeting = "hello ng-app!"}]);app.controller("myCtrl2" , ["$scope", function($scope){$scope.greeting = "hello ng-app!"}]);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>

`</body>`

`2、渲染指令：指令的作用就是将数据，渲染展示到页面上【底层是封装了DOM操作】`

1、渲染指令-ng-repeat：

循环渲染指令，属性直接写在循环的标签上

根据理解的需要，我例举了循环的几个例子供参考

<!DOCTYPE html>
<html ng-app="myApp">
<head><meta charset="UTF-8"><title>循环练习</title><script src="js/angular.min.js"></script><style>a {text-decoration: none;color: darkred;}</style>
</head>
<body ng-controller="myCtrl">
<ul>字符串循环<li ng-repeat="str in strs"><span ng-bind="str"></span></li>
</ul>
<hr/>
<ul><li ng-repeat="obj in objs"><span ng-bind="obj.name"></span><span ng-bind="obj.age"></span></li>
</ul>
<ul><li ng-repeat="goods in goodses"><span ng-bind="goods.goodsID"></span><span ng-bind="goods.goodsName"></span><span ng-bind="goods.goodsPrice"></span></li>
</ul>
<hr/>
<ul><li ng-repeat="user in users"><span ng-bind="user.userID"></span><span ng-bind="user.userName"></span><span ng-bind="user.address.native"></span><span ng-bind="user.address.province"></span><span ng-bind="user.address.country"></span></li>
</ul>
</body>
<script>var app=angular.module("myApp",[]);app.controller("myCtrl",function ($scope) {$scope.strs=["a","b","c"]$scope.objs=[{name:"聂悦",age:15},{name:"小花",age:12}]$scope.goodses=[{goodsID:1,goodsnName:"商品A",goodsPrice:122},{goodsID:2,goodsnName:"商品B",goodsPrice:133},{goodsID:3,goodsnName:"商品C",goodsPrice:144},]$scope.users=[{userID:1,userName:"nieyue",address:{native:"中国",province:"商丘",cuntry:"睢县"}},{userID:1,userName:"yantao",address:{native:"中国",province:"商丘",cuntry:"民权"}}]});
</script>
</html>

2、渲染指令-ng-bind

ng-bind 变量渲染指令，mustache语法的替代写法

以下为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>
//判断大小

<script>var app = angular.module("myApp", ['ngSanitize']);app.controller("myCtrl", ["$scope", function ($scope) {$scope.content = "<p>这是一段内容</p>";          //会显示<p></p>标签}]);
</script>

2、渲染指令-ng-bind-html

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

以下为ng-bind-html可以绑定内容的例子

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

<script>var app = angular.module("myApp", ['ngSanitize']);app.controller("myCtrl", ["$scope", function ($scope) {$scope.content = "<p>这是一段内容</p>";              //不会显示<p></p>标签}]);

</script>

2、渲染指令ng-bind-incloude

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

3、节点指令

3、节点指令ng-switch

ng-switch-指令，类似于JQuery 中的switch-case

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"><!-- user字符串 -->会员登录</div><div ng-switch-default>游客登录</div></div></div>

3、节点指令ng-hide或ng-show

ng-hide或ng-show指令：用于显示隐藏或显示元素的指令。

以下为例

<div><input type="checkbox" ng-model="flagy">显示？{{flagy}}<div ng-show="flagy">圆规为什么可以画圆，因为，脚在走，心不动</div><div ng-hide="flagy">你为什么不能圆梦，因为，心不定，脚不动！</div>
</div>

3、节点指令ng-if

ng-if指令：用于判断输出，会将DOM元素从DOM树上移除或显示。

以下为例

<div><input type="checkbox" ng-model="flagx">用户登录{{flagx}}<div ng-if="flagx" ng-class="'sky'"></div></div>

3、节点指令ng-class

ng-class指令：{{样式名称：布尔类型}}

以下为例

 <style>.default{font-size:16px;color:#888;}.sky {font-size:18px;color:#2aabd2;}</style>

<div> <div ng-class="{default:def,sky:s}"> 天地不仁以万物为刍狗 </div> <input type="checkbox" ng-model="def">使用default样式修饰{{def}}<br /> <input type="checkbox" ng-model="s">使用sky样式修饰{{s}}<br /> </div> <div> <!-- [样式class名称] [使用较多：熟悉]--> <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>

3、节点指令ng-class-even/odd

ng-even/odd指令：偶数或奇数来改变

以下为例

<style>.default{font-size:16px;color:#888;}.sky {font-size:18px;color:#2aabd2;}</style>

 <div> <ul> <li ng-repeat="u in users"> <span ng-bind="u" ng-class-even="'default'" ng-class-odd="'sky'"></span> </li> </ul> </div>


3、节点指令ng-style

ng-style指令：主要用于自定义指令的时候进行样式处理，常规使用方式和行内使用方式没有太大区别。

以下为例

 <div><button ng-click="sty={color:'orange'}">点击</button><div ng-style="sty"></div><!--<div ng-style="'{color:"red"}'">测试</div>--></div></div>

 ng-src:用于在Angular应用中替代img标签的src属性ng-href:用于在Angular应用中替代a标签的href属性

3、事件指令ng-click

ng-click指令：用于操作事件的指令，通常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第三讲相关推荐

AngularJS和DataModel
通常,在AngularJS中使用JSON作为存储数据的模型.我们可能这样在controller中写model: app.controller('BookController',['$scope',fu ...
AngularJS 杂项知识点
1.要用ngChange要同时使用ngModel,下拉选择获取当前选中值. 2.打包代替动态加载(js文件) requirejs真正的价值在于模块化,不是动态加载,angularjs本身有模块化机制, ...
angularjs post 跨域
web api搞好了:用Ajax妥妥的:但是前端用的AngulagJS,也懒得再换为Ajax了: 但是问题来了:提示: 已拦截跨源请求:同源策略禁止读取位于 http://x.x.x.x:port/a ...
AngularJS 指令
1. AngularJS指令的特点: AngularJS通过被称为指令的新属性来扩展HTML,指令的前缀为ng-. AngularJS通过内置的指令来为应用添加功能. AngularJS允许你自定义指 ...
AngularJS中的按需加载ocLazyLoad
欢迎大家讨论与指导 : ) 初学者,有不足的地方希望各位指出一.前言 ocLoayLoad是AngularJS的模块按需加载器.一般在小型项目里,首次加载页面就下载好所有的资源没有什么大问题.但是当 ...
【12】AngularJS 事件
AngularJS 事件 AngularJS 有自己的 HTML 事件指令. ng-click 指令 ng-click 指令定义了 AngularJS 点击事件. <div ng-app=&qu ...
Angular的ChangeDetectorRef.detectChanges()实现angularJS的$apply()方法，强制刷新数据渲染
在Javascript代码里,都是按照一定顺序来执行的,当轮到一个代码片段执行的时候,浏览器就只会去执行当前的片段,不会做任何其他的事情.所以有时候一些做得不是很好的网页,当点击了某个东西之后会卡住, ...
AngularJS学习笔记（3）——通过Ajax获取JSON数据
通过Ajax获取JSON数据以我之前写的与用户交互的动态清单列表为例,使用JSON前todo.html代码如下: <!DOCTYPE html> <html ng-app=&quo ...
angularjs 学习笔记简单基础
angularjs是谷歌公司的一个项目,弥补了hml在构建方面的不足,通过指令(directive)来扩展html标签,可以使开发者使用html来声明动态内容. angularjs主要用来开发单页应用 ...

angularJS第三讲

今天要说的是AngularJS里面的指令

AngularJs第三讲

指令：就是扩展了HTML的基本功能，通过额外的标签、属性来增强HTML功能，按照常见的指令，可以把指令划分为五大类，分别是控制指令、渲染指令、节点指令、事件指令、其他指令。。。。

1、控制指令

`</body>`

`2、渲染指令：指令的作用就是将数据，渲染展示到页面上【底层是封装了DOM操作】`

2、渲染指令-ng-bind

ng-bind 变量渲染指令，mustache语法的替代写法

2、渲染指令-ng-bind-html

2、渲染指令ng-bind-incloude

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

3、节点指令

ng-switch-指令，类似于JQuery 中的switch-case

ng-hide或ng-show指令：用于显示隐藏或显示元素的指令。

ng-if指令：用于判断输出，会将DOM元素从DOM树上移除或显示。

ng-class指令：{{样式名称：布尔类型}}

ng-even/odd指令：偶数或奇数来改变

ng-style指令：主要用于自定义指令的时候进行样式处理，常规使用方式和行内使用方式没有太大区别。

ng-click指令：用于操作事件的指令，通常ng-[event]来命名指令，如ng-click指令。Angular事件处理，需要将对应的函数挂载到对应的控制器$scope上

angularJS第三讲相关推荐

最新文章

热门文章