前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >第215天:Angular---指令

第215天:Angular---指令

作者头像
半指温柔乐
发布2018-09-11 09:31:28
3.2K0
发布2018-09-11 09:31:28
举报
文章被收录于专栏:前端知识分享

指令(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过后就不会再找

代码语言:javascript
复制
 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时会转义,为了安全(跨站脚本攻击)

代码语言:javascript
复制
 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指令用来编译一个数组重复创建当前元素,如

代码语言:javascript
复制
 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     &nbsp;&nbsp;&nbsp;&nbsp;
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类型表示是否添加该类名

代码语言:javascript
复制
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>

代码语言:javascript
复制
 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则不会展示该元素

代码语言:javascript
复制
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,如

代码语言:javascript
复制
1 <!-- 浏览器在解析HTML时会去请求{{item.url}}文件 -->
2 
3 <img src="{{item.url}}">
4 
5 <!-- 可以使用ng-src解决该问题 -->
6 
7 <img ng-src="{{item.url}}">
代码语言:javascript
复制
 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

代码语言:javascript
复制
 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-checkedng-selected 只会做数据到视图的同步,不会做视图到数据的同步

代码语言:javascript
复制
 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-model

ng-class

ng-show/ng-hide/ng-if

ng-click

ng-link/ng-src

11、自定义指令

AngularJS中可以通过代码自定义指令:

代码语言:javascript
复制
 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 });
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2018-04-08 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 指令(Directive)
    • 1、ng-app 指令
      • 2、ng-bind指令
        • 3、ng-repeat指令
          • 4、ng-class 指令
            • 5、ng-show/ng-hide 指令
              • 6、ng-if是指是否存在DOM元素
                • 7、ng-link/ng-src 指令
                  • 8、ng-switch
                    • 9、ng-checked
                      • 10、其他常用指令
                        • 11、自定义指令
                        领券
                        问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档