AngularJS 指令
2019-04-24 本文已影响0人
四爷来了
AngularJS 指令
背景
1、HTML构建应用时存在诸多的不足；
2、AngularJS通过扩展一系列的HTML属性/标签来弥补这些缺陷。
什么是AngularJS指令？
1、所谓指令就是AngularJS自定义的HTML属性或标签；
2、这些指令都是以ng-做为前缀的。
一、内置指令
ng-app
指定应用根元素 也就是ng管理的范围.可以使用全局对象angular的module方法根据该属性的值创建模块对象
ng-controller
指定与控制器关联的视图
ng-repeat
1、重复生成HTML标签
2、它可以遍历数组
3、它也可以遍历对象：
ng-repear="item in obj"
- item是obj对象的每一个属性的值。
- 如果你想要拿到对象的键值，ng-repear="(key,value) in obj"
- key就代表对象的每一个键
- value就代表值.
ng-show
用来控制元素是否显示,取值：boolean true显示 false不显示
注：无论显示与否，DOM树上都是有这个元素的
ng-hide
用来控制元素是否隐藏,取值：boolean true隐藏 false不隐藏
ng-if
控制元素是否被创建，取值：boolean
true：代表这个元素会被创建在DOM树上
false：这个元素不会被创建在DOM树上
ng-src 增强的src路径
ng-href 增强的href路径
注：这两个指令想要使用变量的值 就必须要加{{}}才可以.
ng-class
功能: 指定的CSS类样式是否作用于指定的标签，取值是1个对象: {属性名:属性值}。
属性名: 写CSS类样式名称.
属性值: boolean true代表这个样式将会被作用在该标签身上.false 不会。
例：{red:true} 表示会添加1个red类名到元素身上.{red:false}不会将red类名添加到元素身上.
补充：
取值可以是对象 {red:true} {red:true,other：true}
还可以是表达式（三元表达式返回一个类名）：ng-class=""
不能直接是一个类名：ng-class='red'(这个是错误的)
ng-include
功能: 将另外1个单独的文件的内容包含到该标签之中,一般情况下用在页面的公共部分。
注意：
1. ng-include指令的值要用双引号引起来 路径还要用单引号引起来.
2. 包含的原理是ajax请求过来的 所以你必须要以服务器的方式打开.
ng-disabled / ng-checked / ng-selected / ng-readonly
原生的disable属性是有歧义的.不管你给什么值 都是被禁用的。
ng-disable取值更有意义: boolean true代表禁用 false就代表不禁用。
ng-switch
功能: 判断遍历的值,根据遍历的值决定创建哪1个标签。
案例：
<script src="./lib/angular.min.js"></script>
<body ng-app="hmApp">
<div ng-controller="demoCtrl">
<ul ng-switch="lesson">
<li ng-switch-when="html">html</li>
<li ng-switch-when="css">css</li>
<li ng-switch-when="javascript">javascript</li>
<li ng-switch-when="c">c</li>
<li ng-switch-default>默认的</li>
</ul>
</div>
<script>
var app = angular.module("hmApp", []);
app.controller("demoCtrl", ["$scope", function ($scope) {
$scope.lesson = "java";
}]);
</script>
</body>
ng-init
作用:在视图中初始化变量的值。
不建议经常使用。
a. 大多数数据是通过ajax请求过来的；
b. 只适合于初始化简单的数据 复杂的数据不方便。
ng-model
数据的双向绑定
1、 只能作用在表单元素身上，在其中声明1个变量。
ng-model="val" 表示声明了1个val变量.
2、如果表单元素的值发生了变化,那么这个变量的值也会跟随一起发生变化.
如果这个变量的值发生了变化,那么这个表单元素的值也会跟着一起发生变化.
拓展：
数据单向绑定.
在控制器制造数据 将制造好的数据存储到$scope数据模型中.
在视图中使用{{}}来绑定显示数据的这个过程 我们就叫做数据的单向绑定。
ng-bind
{{}}数据绑定符号其实是ng-bind指令的简写形式.
作用: 绑定显示数据的.和 {{}}作用差不多.
1、ng-bind是将标签的内容进行替换.
2、大多数情况下使用{{}}比ng-bind更方便.
ng-cloak
解决闪烁,将指令了ng-cloak的元素隐藏起来
拓展：
如何解决闪烁：
> 使用ng-bind指令.
> ng-cloak指令
解决闪烁的原理:
先是生成了1段CSS代码,将指令了ng-cloak的元素隐藏起来.
等数据确定以后再显示出来.
> 将angular的引入放在最上面.
二、自定义
概念
模块对象app,提供了一个directive方法,这个方法就可以让我们自定义指令，该方法需要两个参数：
方法：directive
参数一：指令的名称
1、 指令名称不能包含符号；
2、 如果指令名称是单个单词，那就可以直接使用，例如tag，如果中间有连接符如my-tag，则使用的时候要用驼峰规则如myTag。
参数二： 回调函数
1、在ng解析这个指令的时候,就会自动去执行这个回调函数；
2、这个回调函数必须要按照要求返回1个对象(下面对这个对象进行详细介绍)
回调函数详解：
这个回调函数必须要返回1个对象.通过键值对的形式来指定这个自定义指令要做的事情。如下：
1、restrict: 指定自定义的指令的类型，可以是“E”“C”“M”“A”字母中的任意一个和多个字母的组合；
（ECMA E:Element C:Class M:Mark A:Attribute 自定义指令）
2、replace: bool值,是否替换原有标签.
3、template: 模板,自定义指令将被替换成什么.
4、templateUrl:加载外部文件 给一个需要加载的文件的路径
/----------------------------案例----------------------------------------------------------
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="lib/angular.js"></script>
</head>
<body>
<div my-tag></div> <!--加了这个自定义指令的标签中,就会被自动渲染自定义指令对应的template -->
<script>
var app = angular.module('myApp',[]);
app.directive('myTag',function () {
return {
restrict:'EA',
replace:false,
template:'<h1>我是文本</h1>'
};
});
</script>
</body>
</html>
注：
指令的本质是1个html属性.按照html规范 为属性赋值无论如何应该使用""将值括起来；
取值: 可以直接是1个boolean值，也可以给1个变量的值，还可以写1个表达式。
