指令
- ng-app:是程序入口，宣告angular的管理范围
- ng-click:注册一个点击事件
- ng-model:双向数据绑定
- ng-init:初始化数据模型
- ng-controller:指定我们使用哪一个控制器
- ng-bind:也是用来绑定数据模型的值，注意必须在双标签中使用
- ng-cloak:利用了angular会移除掉样式名为ng-cloak的样式的特性
- ng-bind-html:就是用来安全渲染我们的html，注意必须和ngSanitize连用
- ng-repeat:用来渲染数据列表（数组/对象）中的数据，ng- repeat="item in data track by $index"
- ng-class:操作样式，一种是在多种样式中选择一种样式
ng-class="{'A':'red','B':'blue','C':'green'}[item.salary]"
还有一种是在多种样式中选择多种样式
"{'red':false,'fontColor':true,'green':true}"
11.ng-hide/ng-show:隐藏或者显示我们的元素，这对指令是利用display:none
12.ng-if/ng-switch ng-switch-when
自定义指令简单介绍及使用
-
自定义指令无外乎增强了HTML,提供了额外的功能。
-
内部指令基本能满足我们的需求。
-
少数情况下我们有一些特殊的需要，可以通过自定义指令的方式实现：
-
通过 模块对象的directive方法创建
- 有两个参数，第一个参数，是指令的名字：必须是驼峰命名法命名
第二个参数和控制器的第二个参数一样,在第二个参数的function里直接返回的一个obj对象 - 使用时：需要将指令的名字转成小写，并以-分割原先在大小写字母
- 有两个参数，第一个参数，是指令的名字：必须是驼峰命名法命名
自定义指令中回函数里返回的对象的属性
-
template:需要一个字符串，最终这个字符串值被被添加到自定义指令所在标签的innerHTML位置
-
templateUrl:需要一个字符串，这个字符串是一个文本文件的路径,anuglar最终会异步请求这个文件，把拿到的内容插入到自定义指令所在的标签的innerHTML位置,
该字符串也可以是script标签的id值，把script标签中的内容当作模板字符串来使用
注意：script的type属性需要为"text/ng-template" -
restrict:限制自定义属性 也是需要一个字符，可以是A,E,C,M 这4个字符中任何一个，也可以任意的组合，A:以属性的形式使用，E:以自定义标签的形式使用，C:表示以类样式名的形式使用，M:以注释的形式使用
-
replace: 需要一个布尔值，为true,会将自定义指令所在的标签替换为模板字符串。
-
transclude:转置，是需要一个布尔值，为true时会把自定义指令所在标签的innerHTML值添加到模板字符串中，需要与ng-transclude指令配合使用，ng-transclude指令需要将值插入到哪个元素的innerHTML位置.不能与replace指令同用。
-
scope:需要一个对象，可以获取到自定义指令所在标签的属性值：
{
模板中表达式名:'@test', 属性值需要以@开头,@后面是自定义指令所在标签的属性名，最终在模板字符串中通过表达式可以使用scope的属性名可以直接输出模板中表达式名:'@'// 是简写方式}
<body ng-app="myApp"> <my-tab mytitle1="登录" mytitle2="注册" mytitle3="点击"></my-tab> <script id="tpl" type="text/ng-template"> <ul> <li>{{title1}}</li> <li>{{title2}}</li> <li>{{title3}}</li> </ul> </script> <script src="angular.js"></script> <script> var app=angular.module("myApp",[]); app.directive("myTab",function(){ return { templateUrl:"tpl", scope: { title1: '@mytitle1', title2: '@mytitle2', title3: '@mytitle3' } }; }); </script>
</body>
```
- link:指向一个function，这个function有三个参数：
- scope: 类似于控制器中的$scope,也可以暴露一些值。
- element:这是一个jqLite对象，是自定义指令所在标签的jqLite对象
- attributes:是自定义指令所在标签的所以属性的集合.
过滤器(filter)
格式化数据的过滤器
- currency 将数字转成货币的形式显示
<p>{{money | currency :'￥' }}</p>
- date 将整数形式的日期转换为用户能够识别的形式;
<p>{{money | currency :'￥' }}</p>
-
limitTo 是控制字符串显示的长度
- 有两个参数，第一个表示需要显示长度
第二个表示从哪个索引开始显示
- 有两个参数，第一个表示需要显示长度
-
orderBy,需要一个字符串作为参数：这个字符就是数组中元素的一个属性名
,默认是按升序排列的，如果给这个字符前加上一个-号表示降序排列. -
json
-
在js中使用过滤器的方式
// $filter其实是个方法
// 第一个参数:就是过滤器的名字
// 会返回一个方法
// + 至少有一个参数(就是使用到的数据)
// + 其他的参数依次是过滤器所使用到的参数
var tmp = $filter('date')($scope.myDate,'yyyy年MM月-dd日 HH:mm:ss')
$scope.tmp=tmp;
- 1234588910120
- 1234567891011
过滤数据的过滤器
- filter
- 一般是与ng-repeat指令共同使用
- 参数：可以是一个普通类型-angular会对这样的参数进行全局匹配;
也可以是一个object对象-angular就会根据对象中的属性及属性值去数据中的每一个元素中寻找相应的属性，当前属性值相等的时候数据就会被显示。
网友评论