第215天：Angular---指令
2018-04-08 21:29
501 查看
指令（Directive）
AngularJS 有一套完整的、可扩展的、用来帮助 Web 应用开发的指令集在 DOM 编译期间，和 HTML 关联着的指令会被检测到，并且被执行
在 AngularJS 中将前缀为 ng- 这种属性称之为指令，其作用就是为 DOM 元素调用方法、定义行为绑定数据等
简单说：当一个 Angular 应用启动，Angular 就会遍历 DOM 树来解析 HTML，根据指令不同，完成不同操作
注意：HTML5 允许扩展的（自制的）属性，以 data- 开头。
AngularJS 属性以 ng- 开头，但是您可以使用 data-ng- 来让网页对 HTML5 有效。
二者效果相同。
1、ng-app 指令
ng-app指令用来标明一个AngularJS应用程序标记在一个AngularJS的作用范围的根对象上
系统执行时会自动的执行根对象范围内的其他指令
可以在同一个页面创建多个ng-app节点
但是angular找到第一个ng-app过后就不会再找
1 <!DOCTYPE html>
2 <html lang="en">
3
4 <head>
5 <meta charset="UTF-8">
6 <title>ng-app 指令</title>
7 </head>
8
9 <body ng-app="myApp">
10 <!-- angular找到第一个ng-app过后就不会再找 -->
11 <div ng-controller="App1Controller">
12 <input type="button" value="按钮1" ng-click="do1()">
13 </div>
14 <div ng-controller="App2Controller">
15 <input type="button" value="按钮2" ng-click="do2()">
16 </div>
17 <script src="bower_components/angular/angular.js"></script>
18 <script>
19 // 零件1
20 var myApp1 = angular.module('myApp1', []);
21 myApp1.controller('App1Controller', ['$scope', function($scope) {
22 $scope.do1 = function() {
23 console.log(11111);
24 };
25 }]);
26 // 零件2
27 var myApp2 = angular.module('myApp2', []);
28 myApp2.controller('App2Controller', ['$scope', function($scope) {
29 $scope.do2 = function() {
30 console.log(22222);
31 };
32 }]);
33
34 angular.module('myApp', ['myApp1', 'myApp2']);
35 </script>
36 </body>
37
38 </html>2、ng-bind指令
ng-bind指令在绑定的值包含HTML时会转义，为了安全（跨站脚本攻击）1 <!DOCTYPE html>
2 <html lang="en">
3
4 <head>
5 <meta charset="UTF-8">
6 <title>ng-bind-html 指令</title>
7 </head>
8
9 <body ng-app="myApp" ng-init="username='<h1>shit</h1>'">
10 <!-- <strong>{{username}}</strong> -->
11 <!-- ng-bind指令在绑定的值包含HTML时会转义，为了安全（跨站脚本攻击） -->
12 <strong ng-bind-html="username"></strong>
13 <script src="bower_components/angular/angular.js"></script>
14 <script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
15 <script>
16 // 使用自定义的模块才可以依赖别的包里面定义模块，angular定义的默认模块没有依赖任何
17 angular.module('myApp', ['ngSanitize']);
18 </script>
19 </body>
20
21 </html>3、ng-repeat指令
ng-repeat指令用来编译一个数组重复创建当前元素，如1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>ng-repeat 指令</title>
6 </head>
7
8 <body ng-app="myApp">
9
10 <ul ng-controller="ListController">
11 <!-- ng-repeat 会遍历数组中每一个元素，分别创建li -->
12 <li ng-repeat="item in ledamei track by $index" data-id="{{item.id}}">
13 <span>{{$first?'开始':''}}</span>
14 <strong>{{item.name}}</strong>
15
16 <span>{{item.age}}</span>
17 <span>{{$last?'没有了':''}}</span>
18 </li>
19 </ul>
20
21 <script src="bower_components/angular/angular.js"></script>
22 <script>
23 angular.module('myApp', [])
24 .controller('ListController', ['$scope', function($scope) {
25
26
27 $scope.ledamei = [];
28
29 for (var i = 1; i < 10; i++) {
30 $scope.ledamei[$scope.ledamei.length] = {
31 id: i,
32 name: '乐乐' + i,
33 age: 20 + i
34 };
35 }
36
37
38 }]);
39 </script>
40 </body>
41
42 </html>4、ng-class 指令
ng-class指令可以设置一个键值对，用于决定是否添加一个特定的类名，键为class名，值为bool类型表示是否添加该类名1 <ul class="messages">
2
3 <li ng-repeat="item in messages track by $index" ng-class="{red:item.read}">
4
5 {{item.content}}
6
7 </li>
8
9 </ul>1 <!DOCTYPE html>
2 <html lang="en">
3
4 <head>
5 <meta charset="UTF-8">
6 <title>ng-repeat 指令</title>
7 <style>
8 .red {
9 color: red;
10 }
11
12 .green {
13 color: green;
14 }
15 </style>
16 </head>
17
18 <body ng-app="myApp">
19 <input type="text" ng-model="lastname">
20 <ul ng-controller="ListController">
21 <li ng-repeat="name in students track by $id($index)" ng-class="{red:lastname!=''&&name.startsWith(lastname)}">{{name}}</li>
22 </ul>
23 <script src="bower_components/angular/angular.js"></script>
24 <script>
25 angular.module('myApp', [])
26 .controller('ListController', ['$scope', function($scope) {
27
28
29 $scope.students = ['邓乐', '赵四', '王明', '张晓', '李三', '李三'];
30
31
32 }]);
33 </script>
34 </body>
35
36 </html>5、ng-show/ng-hide 指令
ng-show/ng-hide指令会根据属性值去确定是否展示当前元素，例如ng-show=false则不会展示该元素1 <ul class="messages">
2
3 <li ng-repeat="item in messages track by $index" ng-show="item.read">
4
5 {{item.content}}
6
7 </li>
8
9 </ul>6、ng-if是指是否存在DOM元素
7、ng-link/ng-src 指令
ng-link/ng-src指令用于解决当链接类型的数据绑定时造成的加载BUG，如1 <!-- 浏览器在解析HTML时会去请求{{item.url}}文件 -->
2
3 <img src="{{item.url}}">
4
5 <!-- 可以使用ng-src解决该问题 -->
6
7 <img ng-src="{{item.url}}">1 <!DOCTYPE html>
2 <html lang="en">
3
4 <head>
5 <meta charset="UTF-8">
6 <title>ng-src</title>
7 <script src="bower_components/angular/angular.js"></script>
8 </head>
9
10 <body ng-app ng-init="imgUrl='22.png'" ng-cloak>
11 <img ng-src="{{imgUrl}}" alt="">
12
13 <a ng-href="{{imgUrl}}">跳转到图片</a>
14 </body>
15
16 </html>8、ng-switch
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>ng-switch 指令</title> 6 </head> 7 <body ng-app> 8 <select ng-model="selected"> 9 <option value="1">1</option> 10 <option value="2">2</option> 11 <option value="3">3</option> 12 </select> 13 <div ng-switch="selected"> 14 <div ng-switch-when="1"> 15 你选择的是1 16 </div> 17 <div ng-switch-when="2"> 18 你选择的是2 19 </div> 20 <div ng-switch-when="3"> 21 你选择的是3 22 </div> 23 <div ng-switch-default> 24 你什么都没选 25 </div> 26 </div> 27 28 <script src="bower_components/angular/angular.js"></script> 29 </body> 30 </html>
9、ng-checked
ng-checked 和 ng-selected 只会做数据到视图的同步，不会做视图到数据的同步1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title>ng-xxx 其他指令</title> 7 </head> 8 9 <body ng-app> 10 <p> 11 <input type="checkbox" ng-model="checked">全选/取消全选</p> 12 <ul> 13 <!-- ng-checked 和 ng-selected 只会做数据到视图的同步，不会做视图到数据的同步 --> 14 <li>选项01 15 <input type="checkbox" ng-checked="checked"> 16 </li> 17 <li>选项02 18 <input type="checkbox" ng-checked="checked"> 19 </li> 20 <li>选项03 21 <input type="checkbox" ng-checked="checked"> 22 </li> 23 <li>选项04 24 <input type="checkbox" ng-checked="checked"> 25 </li> 26 <li>选项05 27 <input type="checkbox" ng-checked="checked"> 28 </li> 29 </ul> 30 <script src="bower_components/angular/angular.js"></script> 31 </body> 32 33 </html>
10、其他常用指令
ng-modelng-class
ng-show/ng-hide/ng-if
ng-click
ng-link/ng-src
11、自定义指令
AngularJS中可以通过代码自定义指令：1 myModule.directive('hello', function() {
2
3 return {
4
5 restrict: 'E',
6
7 template: '<h1>Hello world</h1>',
8
9 replace: true
10
11 };
12
13 });
14
15 myApp.directive("ngHover", function() {
16
17 return function(scope, element, attrs) {
18
19 element.bind("mouseenter", function() {
20
21 element.css("background", "yellow");
22
23 });
24
25 element.bind("mouseleave", function() {
26
27 element.css("background", "none");
28
29 });
30
31 }
32
33 });
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 改善用户体验的 3 个 AngularJS 指令
- Angular 1.x 指令笔记
- Angular中ng-model指令根据表单域状态添加css类的“空格”问题
- AngularJS clone directive 指令复制
- AngularJS clone directive 指令复制
- Angular用来控制元素的展示与否的原生指令介绍
- angular指令：tm.tags添加/删除标签
- 利用angular指令监听ng-repeat渲染完成后执行脚本
- Angular强大的指令
- Angular入门04： 指令
- angular中的ng-bind-html指令和$sce服务
- angular指令的@ = &
- angular指令学习（三）--自定义指令之compile、link的学习
- angular directive实例第一发 jquery插件datepicker转化成指令
- Angular2组件与指令的小实践——实现一个图片轮播组件
- Angular2组件与指令的小实践——实现一个图片轮播组件
- Angular 指令（Directive）属性型指令
- angular内置指令---以form为例
- 【Angular】ng-app指令：确定应用程序的边界
- angular.js常用内置指令