angular指令总结
angular中不常用却又非常有用的指令总结
- 前言
- ng-class
- 定义和用法
- 语法
- ng-list
- 定义和用法
- 语法
- ng-non-bindable
- 定义和用法
- 语法
- ng-switch
- 定义和用法
- 语法
- ng-readonly
- 定义和用法
- 语法
- ng-include
- 定义和用法
- 语法
- 其他说明
- ng-template
- 定义和用法
- 语法
- 其他说明
前言
angular中有一些不常用，但却非常有用的指令，如果在开发过程中可以直接使用这些指令，会大大地加快我们的开发效率。
angular官网地址：https://www.angularjs.net.cn/api/ng/directive
ng-class
定义和用法
ng-class 指令用于给 HTML 元素动态绑定一个或多个 CSS 类。
ng-class 指令的值可以是字符串，对象，或一个数组。
语法
1.用法一：字符串；
当它的值为一个字符串时，它就会把用空格分开的字符串加到class中(不推荐，与常用class并无太大差别)：
.red{color:red;}
.fsz26{font-size:26px;}
.bgc{background-color:#fff;}<div ng-class="red fsz26 bgc">xxx</div>
2.用法二：数组
当值为一个数组时，它每个字符串元素都会被加到class中
.red{color:red;}
.fsz26{font-size:26px;}
.bgc{background-color:#fff;}<div ng-class="[red,fsz26,bgc]">xxx</div>
3.用法三：对象
当值为一个对象时(key=>value)，把value为true的key加到class中
$scope.isSelected=true;
.red{color:red;}
.green{color:green;}<div ng-class="{true:'red',false:'green'}[isSelected]">xxx</div>
<input type="checkbox" ng-model="isSelected">
这种用法就是说isSelected为true时，就给元素加上red这个class，如果isSelected为false就加上green这个class，这个在逻辑比较简单的时候还是蛮好用的。
下一种适合需要添加多个类的时候，也就是ng-class的值为一个对象
$scope.isSelected=true;
$scope.isCar=true;
.red{color:red;}
.bgc{background-color:#fff;}<div ng-class="{'red':isSelected,'bgc':isCar}">xxx</div>
<input type="checkbox" ng-model="isSelected">
<input type="checkbox" ng-model="isCar">
ng-list
定义和用法
ng-list 指令将输入的字符串转换为数组，并使用逗号分隔。
ng-list 指令还有另外一种转换方式，可以将数组转化为字符串并在输入框中显示。
ng-list 属性值定义了分隔符。
语法
1.用法一：将输入的字符串转化为数组：
<div>请输入用户姓名<input type="text" ng-model="name_str" ng-list>
</div>
打印name_str的结果为：[Mary,Lisa,Mike]
2.用法二：将数组转化为字符串渲染在数据框里：
语法：ng-list=“分隔符”
$scope.name_arr=[[Mary,Lisa,Mike];
<div>请输入用户姓名<input type="text" ng-model="name_arr" ng-list=",">
</div>
ng-non-bindable
定义和用法
ng-non-bindable 指令用于当前的 HTML 元素或其子元素不需要 AngularJS编译。
语法
<div ng-non-bindable>{{5+5}}</div>
显示如下：
ng-switch
定义和用法
ng-switch 指令根据表达式显示或隐藏对应的部分。
对应的子元素使用 ng-switch-when 指令，将匹配的html元素进行显示，其他未匹配的html则移除。
可以通过使用 ng-switch-default 指令设置默认选项，如果都没有匹配的情况，默认选项会显示。
语法
<element ng-switch="expression"><element ng-switch-when="value"></element><element ng-switch-when="value"></element><element ng-switch-when="value"></element><element ng-switch-default></element>
</element>
ng-readonly
定义和用法
ng-readonly 指令用于设置表单域(input 或 textarea) 的 readonly 属性。
如果 ng-readonly 属性的表达式返回 true 则表单域为只读。
语法
<input type="text" ng-model="str1" ng-readonly="true">
ng-include
定义和用法
ng-include 指令定义和使用HTML代码碎片的功能。用于将HTML切碎分别存储，并根据需求再去获取对应的代码块，达到加速访问和代码复用的效果。
比如评论功能，需要一层html结构嵌套另一层html结构，直至最后一层的html结构length为0，这个时候使用ng-include指令就再适合不过了。
语法
1.用法一：传入静态文本
<div ng-include="'part.html'"></div>
2.用法二：传入变量
语法：ng-list=“分隔符”
$scope.template={url:"http://..."}
<div ng-include="template.url"></div>
3.用法三：传入函数
$scope.getUrl=function(){...reutrn url;
}
<div ng-include="getUrl()"></div>
4.用法四：作为标签名使用
<div data-ng-include="'part.html'"></div>
<ng-include src="'part.html'"></ng-include>
其他说明
ng-include指令通常需要和ng-init指令和ng-template指令搭配使用，ng-init指令用于初始化一些要用到的变量，ng-template指令创建html模板。
ng-template
定义和用法
用于将多个HTML片段存放于一个HTML文件中，并且可以根据需求分别调用其中的某一个片段。
语法
<script type="text/ng-template" id="part.html"><!-- HTML片段的实际内容 -->
</script>
<div ng-include="part.html"></div>v>
其他说明
ng-include指令通常需要和ng-init指令和ng-template指令搭配使用，ng-init指令用于初始化一些要用到的变量，ng-template指令创建html模板。
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！