第215天:Angular---指令
指令(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-model
ng-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 });
转载于:https://www.cnblogs.com/le220/p/8709587.html
第215天:Angular---指令相关推荐
- Angular指令 - 何时以及如何使用编译,控制器,预链接和后链接[关闭]
本文翻译自:Angular directives - when and how to use compile, controller, pre-link and post-link [closed] ...
- angular指令:tm.tags添加/删除标签
一个添加删除标签angular指令: 在网上找了几个标签插件都不是angular的,而且过于庞大,最小的也要30kb还引用了其他样式. 最后实在受不了自己写了,花4个小时找插件,最后自己2小时写完了. ...
- angular 指令
Angular 指令的不同类型如下: 组件 -- 带有模板的指令.这种指令类型是最常见的指令类型. 属性型指令 -- 更改元素.组件或其他指令的外观或行为的指令. 结构型指令 -- 通过添加和删除 D ...
- angular指令心得(ng-model)
angular指令心得(ng-model) 在项目中编写指令,常常会依赖其他的指令来实现想要达到的功能,其中最常用到的便是ng-model,它为我们明确了需要绑定的属性,虽然在指令中可以通过通过使用独 ...
- Angular指令渗透式理解
通过一段时间对angular指令的使用,理解了angular指令的意义,下面逐一介绍一下. ng-app:定义一个angualr模块,表示angular作用的范围,如下代码: ng-app在html标 ...
- angular指令ng-class巧用
什么是ng-class ng-class最大的妙用就是可以根据你的逻辑表达式.来添加或移除对应的class ng-class是angular.js里面内置的一个指令. 项目中,有时候,我们需要根据需求 ...
- angular 指令渲染_Angular JS指令有后期渲染回调吗?
我刚刚得到指令,将模板插入到其元素中,如下所示: # CoffeeScript .directive 'dashboardTable', -> controller: lineItemIndex ...
- angular 指令渲染_Angularjs渲染的 using 指令的星级评分系统示例
本文介绍Angularjs渲染的 using 指令的星级评分系统示例,分享给大家,具体如下: 我试图创建静态使用 angularjs/离子成效甚微的星级评分系统.但目前什么都不输出到屏幕上...... ...
- angular指令监听ng-repeat渲染完成后执行自定义事件方法
2019独角兽企业重金招聘Python工程师标准>>> 今天工作中遇到需要用到ng-repeat遍历渲染完后执行某个操作,angular本身并没有提供监听ng-repeat渲染完成的 ...
- angular 指令渲染_Angular 组件交互 ngOnChanges 监听某一属性值变更
我们在实际项目中会拆分各个功能模块,以便页面复用,避免重复工作.那么,这里就涉及到组件之间的交互问题.例如常使用的,输入型数据绑定.setter截听.ngOnChanges()截听以及通过创建引入服务 ...
最新文章
- 并发编程之多进程编程(python版)
- 自媒体人怎样快速拥有自己的APP
- IOS开发基础知识--碎片39
- oracle数据库克隆工具,OracleCopier
- echarts堆叠图tooltip中如何仅展示鼠标当前位置相应的指标数据
- 缓存-分布式锁-Redisson简介整合
- c语言 if 多个判断条件执行顺序_C语言之流程控制选择语句
- HDU - 4578Transformation——线段树+区间加法修改+区间乘法修改+区间置数+区间和查询+区间平方和查询+区间立方和查询
- 5招训练你的数据敏感度,数据高手都在用
- Ride to Office(信息学奥赛一本通-T1227)
- 因计算机磁盘硬件的pe,PE缺少AHCI驱动无法识别硬盘更新U盘启动盘中的WINPE
- 车载ECU软件刷新flash driver制作
- 短信验证码后端-接口设计
- MT【18】幂平均不等式的证明
- 转载:“只要3分钟,我就能扒光你的隐私!” | 互联网时代,14亿中国人都在裸奔|你的隐私已不是隐私
- Python中range()函数的用法
- [区块链文章之其一] 成为加密货币矿工容易吗?我该如何入门?
- HTML5七夕情人节表白网页(幻化3D相册) HTML+CSS+JavaScript 求婚示爱代码 520情人节告白代码 程序员表白源码 3D旋转相册 js烟花代码 css爱心表白
- 2017年的奋斗目标
- iPhone开发之音视频的播放——MPMoviePlayerViewController和AVAutoPlayer的使用
热门文章
- software enginer1
- NHibernate 配置文件的处理和使用多数据库的多层架构思路(第二部分)
- UA PHYS515 电磁理论I 麦克斯韦方程组基础4 介质中的麦克斯韦方程
- UA MATH575B 数值分析下IV 带约束的优化
- SVN 图标和工具、wc.db学习
- leetcode 925. 长按键入
- C++面试笔记(2)
- 现在的位置就是对的啊,意思就是当鼠标放上去的时候,停止滚动,鼠标离开,继续滚动(跑马灯项目功能)...
- Redis笔记之常用命令
- Spring源码解析-核心类之XmlBeanDefinitionReader