指令作用域
- 自定义指令可以又自己的控制器，自己的模型和作用域
- 默认情况，指令使用的模型是和它所在的控制器的模型是同一个模型
- 注意：使用指令时，一定要注意大小写
- 如果定义指令名称为大写，使用自定义指令时要用 - 转换
- 如：定义指令名称 'skDir',使用自定义指令时转换成 'sk-dir'
<body ng-app='app' ng-controller='xmgController'>
<input type='text' ng-model='msg'>
<sk-dir></sk-dir>
</body>
<script src='js/angular.js'></script>
<script>
var app = angular.module('app',[]);
app.controller('xmgController',['$scope',function($scope){
$scope.msg = '666';
}]);
app.directive('skDir',function(){
return {
restrict:'EA',
template:'<h1>{{msg}}</h1>',
replace:true,
controller:function($scope){
$scope.msg="我是指令的 msg"
}
}
})
</script>
过滤器
在 AngularJS 中，使用过滤器格式化展示数据，作用就是接收一个输入，通过某个规则进行处理，然后范湖处理结果
angular 内置了9个过滤器
- 1.currency:将数值格式化为货币格式
<p>{{price | currency:'$'}}</p> - 2.date:日期格式化
<p>{{nowTime | date:'yyyy-MM-dd hh:mm:ss'}}</p> - 3.limitTo:取出字符串或数组前几位(正数)，或后几位（负数）
<p>{{course | limitTo:-1}}</p> - 4.uppercase:将文本转换成大写格式
- 5.lowercase:将文本转换称小写格式
<p>{{str1 | uppercase}}</p>
<p>{{str2 | lowercase}}</p> - 6.number:数字格式化，可控制保留几位小数位数
<p>{{num | number:2}}</p> - 7.orderBy: 对数组进行排序，第二个参数可控制方向，默认是 false 升序
<p>{{score | orderBy:'' : false}}</p>
<p>{{stu | orderBy:'age' :true}}</p>
............................
$scope.course = ['html','css','js'];
$scope.stu = [
{name:'sk',age:22},
{name:'sk1',age:25},
{name:'sk2',age:12},
{name:'sk3',age:34},
{name:'sk4',age:23}
];
- 8.filter: 在给定数组中选择满足条件的一个子集，并返回一个新的数组，其提哦案件可以是一个字符串，对象，函数
<input type="text" ng-model="search">
<p>{{curse | filter:search}}</p>
//输入一个字符，就会把包含此字符的数组元素显示出来
<ul>
<li ng-repeat='value in course | filter:search'>{{value}}</li>
</ul>
............................
$scope.course = ['html','css','js'];
$scope.stu = [
{name:'sk',age:22},
{name:'sk1',age:25},
{name:'sk2',age:12},
{name:'sk3',age:34},
{name:'sk4',age:23}
];
管道符
- 管道符：把上次的结果作为下次参数传递 “|”
- 注意：过滤器本质是一个方法/函数/function
- 过滤器会自动把 '|'前面的内容，当作方法第一个参数传递
<p>{{price | currency:"$"}}</p>
function currency(input,arg){
return arg + input;
}
- 注意2：如果想要自己手动传参，使用冒号 ':'传递
自定义过滤器
- AngularJS 内置过滤器，还可以根据业务需要自定义过滤器
- 通过模块对象实例提供的 filter 方法定义过滤器
- 自定义过滤器
- 参数一：过滤器名称
- 参数二：回调函数
- 返回为一个函数（input 为自动传入的数据，input 为管道符前面的内容）
app.fliter('skCur',function(){
return function(input,args){
return args + input
}
})
app.filter('firstUppercase',function(){
return function(input,args){
return input[0].toUpperCase() + input.slice(1);
}
})
依赖注入
- AngularJS 采用模块化的方式组织代码，将一些通用逻辑封装成一个对象或者函数，实现最大成都的复用，这导致了使用者和被使用者之间存在依赖关系
- 所谓依赖注入是指在运行时自动查找依赖关系，然后将查找到依赖传递给使用者的一种机制
- 依赖注入分为两种：
- 行内注入
以数组形式明确声明依赖，数组元素都是包含依赖名称的字符串，数组最后一个元素是依赖注入的目标函数 - 推断式注入
1.没有明确声明依赖，AngularJS 会将函数参数名称当成是依赖名称
2.这种方式会带来一个问题，当代码经过压缩后函数的参数被压缩，这样便会造成依赖无法找到，所以不建议使用
网友评论