2017-5-21 AngularJS学习笔记

指令作用域

• 自定义指令可以又自己的控制器，自己的模型和作用域
• 默认情况，指令使用的模型是和它所在的控制器的模型是同一个模型
• 注意：使用指令时，一定要注意大小写
• 如果定义指令名称为大写，使用自定义指令时要用 - 转换
• 如：定义指令名称 'skDir',使用自定义指令时转换成 'sk-dir'

过滤器

在 AngularJS 中，使用过滤器格式化展示数据，作用就是接收一个输入，通过某个规则进行处理，然后范湖处理结果

angular 内置了9个过滤器

• 1.currency:将数值格式化为货币格式
  

  {{price | currency:'$'}}

• 2.date:日期格式化
  

  {{nowTime | date:'yyyy-MM-dd hh:mm:ss'}}

• 3.limitTo:取出字符串或数组前几位(正数)，或后几位（负数）
  

  {{course | limitTo:-1}}

• 4.uppercase:将文本转换成大写格式
• 5.lowercase:将文本转换称小写格式
  

  {{str1 | uppercase}}

  
  

  {{str2 | lowercase}}

• 6.number:数字格式化，可控制保留几位小数位数
  

  {{num | number:2}}

• 7.orderBy: 对数组进行排序，第二个参数可控制方向，默认是 false 升序

{{score | orderBy:'' : false}}
{{stu | orderBy:'age' :true}}
............................
$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: 在给定数组中选择满足条件的一个子集，并返回一个新的数组，其提哦案件可以是一个字符串，对象，函数

{{curse | filter:search}}
//输入一个字符，就会把包含此字符的数组元素显示出来

        
{{value}}

............................
$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
• 过滤器会自动把 '|'前面的内容，当作方法第一个参数传递

{{price | currency:"$"}}
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.这种方式会带来一个问题，当代码经过压缩后函数的参数被压缩，这样便会造成依赖无法找到，所以不建议使用