AngularJS (9) directive templateUrl與scope
本篇完整程式碼請看Plunkr
HTML樣版，既然是為了讓HTML更有組織性、更好管理，除了像AngularJS (8) directive templateUrl儲存一般的字串，其實樣版就像中文句型一樣，可以替換文字。
以中文句型來說，
我的名字是 Lily
我的名字是 Ihc
我的名字是 _____ 這個句型其實就是一個樣版。
要丟進樣版的值從哪裡來？宣告標籤會沿用控制器的作用範疇，連結控制器的變數到樣版的變數。簡單來說
<div ng-controller="控制器1">
<宣告標籤></宣告標籤>
</div>
和
<div ng-controller="控制器2">
<宣告標籤></宣告標籤>
</div>
雖然都用同一個宣告標籤，但是上面的宣告標籤沿用控制器1的scope，下面的宣告標籤則是沿用控制器2的scope。
什麼是「宣告標籤沿用控制器的作用範疇」？
延續AngularJS (8)用樣版顯示兩次歡迎文字後，我們還想要在第一頁印出兩位網誌作者的名字。
Hi, I'm the author LILY.
Hi, I'm the author IHC.
當然嚕，你不覺得Hi, I'm the author _____ 可以做成一個樣版嗎？就來做吧！
作者樣版.html
The author {{authorInfo.name}}.<br />
authorInfo是要替換文字的變數，authorInfo.name則是要替換的name值。
JS 控制器
樣板只是句型，要替換的作者名字存在控制器裡，為了方便直接用兩個變數分別存名字。
app.controller('myControl', ['$scope', function($scope) {
$scope.lily = { name: 'LILY' };
$scope.ihc = { name: 'IHC' };
}]);
JS 定義宣告標籤
有了樣版和控制器變數，我們想要在第一頁匯入兩位網誌作者，要使用到宣告標籤的兩個參數：
- templateUrl：宣告標籤myInfo要連到作者樣版
- scope：定義宣告標籤<my-info>有一個新屬性info，負責傳送控制器的值給樣版的變數authorInfo。
var app = angular.module("app1",[]);
app.directive("myInfo", function(){
return {
restrict:'E',
scope: {
authorInfo: '=info'
},
templateUrl:'作者樣版.html'
};
});
第一頁.html
第一個info將控制器myControl的$scope.lily傳給作者樣版的authorInfo變數，第二個info則是傳送$scope.ihc。
<body ng-app="app1">
<div ng-controller="myControl">
<my-info info="lily"></my-info>
<my-info info="ihc"></my-info>
</div>
</body>
完成
Hi, I'm the author IHC.
兩個控制器下的宣告標籤
開頭說過宣告標籤沿用控制器的作用範疇，才能將控制器的變數傳給樣版。
好處是，兩個控制器可以自由使用宣告標籤，各自定義要傳給宣告標籤的值，就更能彈性地使用宣告標籤的樣版了。
實例2
我們再定義一個控制器，作者名稱換成"Mac"、"Apple"，看看兩個控制器下的宣告標籤會有什麼差異。
app.controller('myControl2', ['$scope', function($scope) {
$scope.mac = { name: 'Mac' };
$scope.apple = { name: 'Apple' };
}]);
修改一下主頁
<div ng-controller="myControl">
<my-info info="lily"></my-info>
<my-info info="ihc"></my-info>
</div>
<div ng-controller="myControl2">
<my-info info="mac"></my-info>
<my-info info="apple"></my-info>
</div>
結果是
The author IHC.
The author Mac.
The author Apple.
<my-info info="xxx">在myControl是傳送myControl的值(lily, ihc)，在myControl2是傳送(mac, apple)。
留言
張貼留言