angular第二天

一、自定義指令
語法:
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搞定
②部分選中
③全部選中

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章