1. 程式人生 > >Angular學習(十)——表示式、外部src引用

Angular學習(十)——表示式、外部src引用

當對<img>或<a>標籤進行資料繫結時,在src或href特性中利用{{ }}來對設定其引用路徑時會出錯。因為瀏覽器不支援圖片和其他內容並行下載。而Angular並不會打擾資料繫結請求。一個<img>常用的語法為:

<img src="/images/cats/{{favoriteCat}}">

而現在在Angular中我們應該使用ng-src屬性來對模板進行建立和修改:

<img ng-src="/images/cats/{{favoriteCat}}">

同樣對於<a>標籤而言,你應該使用ng-href相對應的屬性:

<a ng-href="/shop/category={{numberOfBalloons}}">some Text</a>

Expression

在使用模板的時候使用表示式的目的是讓你對模板、應用邏輯和資料有所考慮,但是同時也防止在模板中使用應用程式邏輯。知道現在,我們經常將資料元素的引用作為表示式傳遞給Angular指令。但是這些表示式能夠完成更多的功能。例如做簡單的算術操作(+,-,*,/,%)、邏輯比較(==,!=,>,<,<=,>=),執行布林值邏輯(&&,||,!)和其他的位元操作(\^,&,|)。你可以呼叫定義在Controller中$scope範圍內的函式,同時你可以引用陣列和物件標記([],{})。這些都是在表示式例項中常用的:

<div ng-controller="SomeController">

<div>{{recompute() /10 }}</div>

<ul ng-repeat="thing in things">

<li ng-class="{highlight:$index % 4 >= threshold($index)}">

{{otherFunction($index)}}

</li>

</ul>

</div>

你可以利用哦表示式做相當多的事情,他們是根據Angular中常用的解析器來進行計算的。這不等同與利用Javascript中的eval(),並且這些表示式相對而言更為嚴格。這些表示式是利用Angular中的常用解析器來執行的。在解析其中你不會發現迴圈結構(for,while等),控制器操作(if-else,throw)和自增自減操作(++,--)。當你需要使用這些結構時,你可以在你的控制器中進行呼叫或通過指令來完成。

儘管Angular中的表示式相對Javascript中的表示式更為嚴謹,但這些表示式經常忘記去定義和定值。而在Angular中模板僅僅是不做任何重新整理,而不會丟擲異常。這將允許你能夠安全的使用那些未被初始化的模板值,同時能夠在他們賦值的同時更新相應的UI空間。

Separating UI Responsibilities with Controllers

控制器(Controller)在應用中主要有三個作用:

1、設定應用模型的初始狀態;

2、通過$scope將模型和函式提供給檢視(UI模板)

3、觀測模型的其他部分來來進行改變和採取措施

在之前我們已經遇到過前兩個功能。我們將稍微的涉及一下最後一點。控制器概念上的作用就是在使用者在與檢視互動的過程中為執行使用者的意願而提供的程式碼和邏輯。為了保持控制器小且可控,我們建議在檢視的每個功能區域中建立一個對應的控制器。也就是說,如果你有一個選單功能,那麼就建立一個MenuController,如果你有一個導航條,那麼就建立一個BreadcrumbController。

一般控制器都繫結到一個他們負責管理的DOM中。有兩種方式可以聯絡到一個DOM節點的控制器,一種是直接通過在模板其ng-controller屬性中宣告,另一種是通過一個route與一個乘坐view的可動態下載的DOM模板片段。

巢狀控制器很簡單,其結構如下:

<div ng-controller = "ParentController">

<div ng-controller="ChildController">...</div>

</div>

儘管我們這樣定義巢狀控制器,但實際的巢狀發生在scope中。巢狀子控制器的$scope繼承於其父控制器的$scope。在這種情況下,傳遞給ChildController的$scope將擁有獲取ParentController的$scope的所有屬性。