2017-5-21 AngularJS学习笔记

2017-05-21 本文已影响0人 GodlinE

指令作用域

自定义指令可以又自己的控制器，自己的模型和作用域
默认情况，指令使用的模型是和它所在的控制器的模型是同一个模型
注意：使用指令时，一定要注意大小写
如果定义指令名称为大写，使用自定义指令时要用 - 转换
如：定义指令名称 '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:将数值格式化为货币格式
{{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 升序

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

2017-5-21 AngularJS学习笔记

指令作用域

过滤器

自定义过滤器

依赖注入

猜你喜欢

热点阅读