Blackie的失敗筆記

A -> AngularJS - Template

前言

昨天談到Directives，透過簡單的指令就可以讓兩邊繫結後直接修改來源即可改變成現的樣子。今天則是要介紹讓大家更可以彈性客制化頁面的Template

Template

不同於Directives直接使用現有的ng相關指令，Template是可以讓你自己宣告如同Directives的樣板，並透過你指定的使用方式(restrict)來作宣告使用，這邊直接帶大家看範例來瞭解。

範例

JS Bin

這邊可以分三個部分：

• html

  <div ng-controller="Ctrl1">
  請選擇人名：
  <ng-name-div names="names"></ng-name-div>
  </div>
  

這邊透過Directives的restrict(這邊我門設定EA表示Element與Attribute皆可宣告)直接使用ng-name-div並將names變數設定至names屬性中

• controller

  function Ctrl1($scope) {
      $scope.names = ['angular','js','man','blackie'];
  }
  

設定呈獻資料的內容來源

• Directives Template

  var app = angular.module('app', []);
  app.directive('ngNameDiv',function ($compile,$location) {
      var getTemplate=function(names){
      var template='<select ><option ng-repeat="name in names" >{{name}}</option></select>';
      return template;
  },
  linker = function(scope, element, attrs) {
       element.html(getTemplate());
      $compile(element.contents())(scope);
  };
  return {
      restrict: "EA",
      replace: true,
      link: linker,
      scope: {
          names:'='
      }
  };
  }); 
  

這邊我們透過app.directive()的方式宣告一個ngNameDiv的Directives Template，注意這邊宣告的名稱如果有大寫在使用的時候就要用-來分割(如：ng-name-div)，透過下方的return我們可以回傳所需的屬性回去。各屬性意涵如下：

• restrict

使用時的表態式，有EACM四種

• replace

是否要置換原屬性或html tag

• link

實際執行樣板的範圍

• scope

傳進來的變數

詳細說明請參考官網Directive

結語

雖然直接使用Directives比較簡單但彈性較小，而透過瞭解Template就可以做好呈現上的一些調配，讓我們可以直接透過變數修改就可以達到頁面呈現的修正，Day-10 over!