不少人已經知道Directive的好處，可以在抽出共同的元素，但這是屬於靜態的頁面，另一種情況是希望控制事件放在Directive ，例如有一個下拉式選單，可以自動帶出所有診所的名稱，我們只要呼叫自訂的元素，就可以使用這個下拉式選單，我們就能重複使用元件而不是畫面。
一、建立網頁的範本
檔名: showClinicMenu.js
function showClinicMenu(app) {
var templateForm = '<input type="hidden" id={{name}}>';
templateForm += "<input
class='form-control' id={{textname}}
ng-model='clinicName' type='text'
ng-change='showClinicMenu(clinicName)'>";
templateForm += "<div class='list-group'>";
templateForm += "<a href='#' class='list-group-item'
ng-click='setClinicID(clinic.clinicIndex,clinic.clinicName)'
ng-repeat='clinic in listClinics'>";
templateForm += "{{clinic.clinicName}}";
templateForm += "</a>";
templateForm
+= " </div>";
}
|
為了將某些元素抽出為共同的元素時，某些欄位名稱要由外部傳進來，所以要呼叫Angular的語法{{}}，然後再由Angular的controller決定變數的值，如果有相關的事件觸發，也能呼叫ng-click呼叫Angular的controller的事件。
二、建立directive元素
function showClinicMenu(app) {
var templateForm = “<input t>……..” //網頁的範本… 上面已說明過… 暫時跳過
app.directive("showclinicmenu", function () {
return {
restrict: 'E',
template: templateForm,
controller: function ($scope, $attrs, $http) {
$scope.name =
$attrs.name; //對應外部的屬性name
$scope.textname = $attrs.textname; //對應外部的屬性textname
$scope.showClinicMenu = function myfunction(clinicName) {
$http.get('../api/ApiTest/listClinics/' +
clinicName).then(function (value) {
$("#" + $attrs.name).empty();
$scope.listClinics = value.data;
});
}
$scope.setClinicID = function (clinicIndex, clinicName) {
$scope.listClinics = null; //清空資料
$scope.clinicName = clinicName;
$("#" + $attrs.name).val(clinicIndex);
}
},
}
});
}; //end showClinicMenu
|
directive中需要用到Controller，要把屬性放在return {}範圍中，在controller中注入需要的元件$scope, $attrs,
$http，所以在範本建立的變數，就可以在controller的範圍中做變數宣告以及事件宣告，但是如果想外部傳入參數到controller
怎麼辦? 請大家耐心往下看吧…
三、呼叫directive元素
<div class="form-group">
<label>診所名稱</label>
<showclinicmenu name="editClinicIndex" textname="editClinicName"></showclinicmenu>
</div>
<script src="~/Scripts/directive/showClinicMenu.js"></script> //引入使用 directive 的 函式
<script>
var app = angular.module(modelName, []);;
showClinicMenu(app);
//呼叫相關的函式
</script>
|
不知道大家對 $attrs是否陌生? 這也是最近作者才發現到另一個好用的功能，當我們在用directive時是否需要傳遞參數進來，但又不知道怎麼做? $attrs 就是連結directive和View之間的連結，以上的範例是directive自已建立的Element，但多了兩個屬性(name, textname)，原來我們在controller 看見的 $attr ，就可以把值傳入到directive的controller 中
app.directive("showclinicmenu", function () {
return {
restrict: 'E',
controller: function ($scope, $attrs, $http) {
$scope.name = $attrs.name; //對應外部的屬性name
$scope.textname =
$attrs.textname; //對應外部的屬性textname
}
});
|
看完以上的範例後…
各位有更進一步的瞭解Angular 了嗎? 雖然Angular 提出不少方便的小功能，但還是要親身感受才能瞭解它的用意… 希望大家還喜歡我這篇文章，謝謝大家。
Angular另外補充：
l 如何將ng-model設成動態產生的變數名稱，以示簡易示範教學
步驟一： 建立空陣列，如果有預設值可以呼叫foreach迴圈，逐一填入對應值
|
$scope.dynamic = {}; //用來放置每個no-model 動態值
angular.forEach(listAllBugs, function (bug, key) {
$scope.statusOptions = ["未完成", "已完成", "會議討論", "退回"];
var statusIndex =$scope.statusOptions (bug.status);
$scope.dynamic[bug.ikey] = options[statusIndex];
$scope.dynamic['estimate_' + rowIndex] = bug.estimatedDate; //依序填入預設值
rowIndex++;
})
|
步驟二：ng-model的命名方式：空陣列名稱[‘字串＿’＋＄index]
|
<tr ng-repeat-start="bug in listAllBugs|filter:searchReleaseText" class="active">
<input type="date" class="datepicker form-control"
ng-model="dynamic['estimate_'+ $index]"
id="estimate_{{::bug.ikey}}" value="{{dynamic['estimate_'+ $index]}}" />
</tr>
|
以陣列方式將『字串和索引值』就能變成ng-model獨一無二的變數名稱，所以後續取值時，就要以迴圈方式，逐一取出變數值…
