指令作用域
- 自定義指令可以又自己的控制器枫匾，自己的模型和作用域
- 默認(rèn)情況，指令使用的模型是和它所在的控制器的模型是同一個(gè)模型
- 注意：使用指令時(shí)堵幽，一定要注意大小寫
- 如果定義指令名稱為大寫狗超，使用自定義指令時(shí)要用 - 轉(zhuǎn)換
- 如：定義指令名稱 'skDir',使用自定義指令時(shí)轉(zhuǎn)換成 '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>
過(guò)濾器
在 AngularJS 中，使用過(guò)濾器格式化展示數(shù)據(jù)朴下，作用就是接收一個(gè)輸入努咐，通過(guò)某個(gè)規(guī)則進(jìn)行處理，然后范湖處理結(jié)果
angular 內(nèi)置了9個(gè)過(guò)濾器
- 1.currency:將數(shù)值格式化為貨幣格式
<p>{{price | currency:'$'}}</p> - 2.date:日期格式化
<p>{{nowTime | date:'yyyy-MM-dd hh:mm:ss'}}</p> - 3.limitTo:取出字符串或數(shù)組前幾位(正數(shù))殴胧，或后幾位（負(fù)數(shù)）
<p>{{course | limitTo:-1}}</p> - 4.uppercase:將文本轉(zhuǎn)換成大寫格式
- 5.lowercase:將文本轉(zhuǎn)換稱小寫格式
<p>{{str1 | uppercase}}</p>
<p>{{str2 | lowercase}}</p> - 6.number:數(shù)字格式化渗稍，可控制保留幾位小數(shù)位數(shù)
<p>{{num | number:2}}</p> - 7.orderBy: 對(duì)數(shù)組進(jìn)行排序佩迟，第二個(gè)參數(shù)可控制方向，默認(rèn)是 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: 在給定數(shù)組中選擇滿足條件的一個(gè)子集竿屹，并返回一個(gè)新的數(shù)組报强，其提哦案件可以是一個(gè)字符串，對(duì)象拱燃，函數(shù)
<input type="text" ng-model="search">
<p>{{curse | filter:search}}</p>
//輸入一個(gè)字符秉溉，就會(huì)把包含此字符的數(shù)組元素顯示出來(lái)
<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}
];
管道符
- 管道符：把上次的結(jié)果作為下次參數(shù)傳遞 “|”
- 注意：過(guò)濾器本質(zhì)是一個(gè)方法/函數(shù)/function
- 過(guò)濾器會(huì)自動(dòng)把 '|'前面的內(nèi)容，當(dāng)作方法第一個(gè)參數(shù)傳遞
<p>{{price | currency:"$"}}</p>
function currency(input,arg){
return arg + input;
}
- 注意2：如果想要自己手動(dòng)傳參碗誉，使用冒號(hào) ':'傳遞
自定義過(guò)濾器
- AngularJS 內(nèi)置過(guò)濾器召嘶，還可以根據(jù)業(yè)務(wù)需要自定義過(guò)濾器
- 通過(guò)模塊對(duì)象實(shí)例提供的 filter 方法定義過(guò)濾器
- 自定義過(guò)濾器
- 參數(shù)一：過(guò)濾器名稱
- 參數(shù)二：回調(diào)函數(shù)
- 返回為一個(gè)函數(shù)（input 為自動(dòng)傳入的數(shù)據(jù)，input 為管道符前面的內(nèi)容）
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 采用模塊化的方式組織代碼哮缺，將一些通用邏輯封裝成一個(gè)對(duì)象或者函數(shù)弄跌，實(shí)現(xiàn)最大成都的復(fù)用，這導(dǎo)致了使用者和被使用者之間存在依賴關(guān)系
- 所謂依賴注入是指在運(yùn)行時(shí)自動(dòng)查找依賴關(guān)系蝴蜓，然后將查找到依賴傳遞給使用者的一種機(jī)制
- 依賴注入分為兩種：
- 行內(nèi)注入
以數(shù)組形式明確聲明依賴碟绑，數(shù)組元素都是包含依賴名稱的字符串俺猿，數(shù)組最后一個(gè)元素是依賴注入的目標(biāo)函數(shù) - 推斷式注入
1.沒(méi)有明確聲明依賴茎匠，AngularJS 會(huì)將函數(shù)參數(shù)名稱當(dāng)成是依賴名稱
2.這種方式會(huì)帶來(lái)一個(gè)問(wèn)題，當(dāng)代碼經(jīng)過(guò)壓縮后函數(shù)的參數(shù)被壓縮押袍，這樣便會(huì)造成依賴無(wú)法找到诵冒，所以不建議使用
