AngularJS (9) directive templateUrl與scope

作者： Tshuà Bûn-lī (蔡文莉) - 8月 10, 2014

本篇完整程式碼請看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 LILY.
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 LILY.
The author IHC.
The author Mac.
The author Apple.

<my-info info="xxx">在myControl是傳送myControl的值(lily, ihc)，在myControl2是傳送(mac, apple)。

搜尋此網誌

Ti-Tiâu