一、自定義指令
語法:
var app = angular.module('myModule',['ng']);
app.directive(name,fn);
自定義指令:
restrict:'EACM'
E-->Element 元素
A-->Attribute 屬性
C-->Class
M-->Comment 註釋(在指令中添加一個屬性:replace:true)
新指令的命名:
①駝峯式
②前綴一般是公司或者項目的簡寫,後綴一般是指令的作用
③使用指令: tsHello--->ts-hello
在第二個參數 指定一個方法,在方法中返回一個對象設置指令。對象中template、restrict、replace、scope。。。
總結:如果要參數的傳遞,需要在創建指令的時候,加上scope,同時指定對應的屬性的名稱(testName),在使用指令的時候,需要加上對應的屬性(test-name='')
練習:創建自定義的指令 tsDirective,傳入ts-name="Hello Directive",調用指令(作爲元素來使用)顯示出來。
二、雙向數據綁定
1、方向1的綁定(Model數據 綁定到View)
實現方法:{{name}}、常用指令(ngRepeat/ngBind/ngIf...)
相比DOM操作:先去查找元素,再去設置元素,只需要把model數據綁定視圖上,數據改,視圖就會更新。
2、方向2的綁定(將View數據綁定到Model數據)
實現方法只有一種方式: ng-model
<input type='text' ng-model='myText'/>
$scope.$watch('模型變量名',function(){})
練習:
留言本:多行文本輸入框textarea、
選擇城市:下拉菜單select、
是否同意:複選框 checkbox
三、過濾器
過濾器是用在表達式中,實現對表達式結果的篩選、過濾、格式化,達到更好的表現效果
語法:|--》管道
{{表達式 | 過濾器1:'name' | 過濾器2 }}
currency 貨幣樣式的過濾器
date 日期
uppercase
lowecase 大小寫的轉換
orderBy 升序或者降序 orderBy:'age':true
limitTo 限定顯示的數量
number 限制顯示小數點後幾位
練習:過濾器,模擬一個list=[{name,age,score},{}],、
①按照age升序,②按照score降序並只顯示前三名
四、常用函數
forEach
uppercase/lowercase
toJson/fromJson
序列化:將一個json對象轉換爲json格式的字符串
反序列化:將一個json格式的字符串 轉換爲json格式的對象
五、服務
在ng中 服務 是 一種單例對象,所謂單例,服務在每一個應用中只會被實例化一次。
功能:爲應用提供數據和對象
兩大類:①內置的服務 ②自定義服務
1、內置的服務的使用方法
如果在控制器中,使用ng中內置的服務,需要在控制器的回調函數中
①將對應的服務給注入進來
②使用服務所提供的數據和對象
app.controller('myCtrl',function($scope,$location){
var url = $location.absUrl();
});
2、控制器和作用範圍
$scope與$rootScope:
$scope是$rootScope的子作用域控制對象,$rootScope的id爲1,其他的爲2,3....
不同的控制器之間,所對應的作用域控制對象($scope),之間是相互隔離的,如果要共享數據,怎麼辦?
藉助$rootScope這個根作用域控制對象來實現。
如果父作用域對象想要調用子作用域對象的變量或者方法,ng提供了2個方法:
①$broadcast 將事件從父親傳遞給子級
$scope.$broadcast(eventName,data);
②$emit 將事件從子級傳遞給父親
$scope.$emit(eventName,data);
接收:
$scope.$on(eventName,function(event,data){
})
每日一練:全選
雙向數據綁定
ngChecked/ngClick/ngModel/ngChange
分析:
模型數據是一個對象數組
步驟:
①ui搞定
②部分選中
③全部選中