第四篇的教學，算是加強之前的觀念。重點 Model 與 View 的綁定關係。最後順便實做一下 ASP.NET PartialView 與 Angular 。
主頁面只做產生畫面及載入相關 css 的動作，InitDialog 則為註冊共用 controller 給 Partial，而過瀘器的部份如果有練習過前幾章節，應該是可以快速上手。
@section scripts{
@Styles.Render("~/Content/themes/base/css")
<script src="~/Scripts/angular.js"></script>
<script src="~/Scripts/MyLibs/Tutorial_04/A001.js"></script>
@Scripts.Render("~/bundles/jqueryui")
<script type="text/javascript">
$(function () {
//建立 jquery UI
InitDialog("My.Helpers.A001");
//註冊 Angular
angular.bootstrap(this);
})
</script>
}
<div ng-controller="My.Helpers.A001">
<input ng-model="query">
<select ng-model="sel">
<option value="Date">ByDate</option>
<option value="Todo">ByTodo</option>
</select>
<ul ng-repeat="item in History | filter:query | orderBy:sel">
<li>{{item.Date}}/{{item.Todo}}</li>
</ul>
</div>
@{
Html.RenderPartial("~/Views/Home/common/DialogView.cshtml");
}
在 Partial 部份，則使用 jQuery 來為元素增加屬性。
<script src="~/Scripts/MyLibs/Dialog.js"></script>
<script type="text/javascript">
function InitDialog(controller) {
$("#DialogView").attr("ng-controller", controller);
var m = new My.Helpers.Dialog( "#DialogView" );
m.SetTitle("Show");
m.Open();
}
</script>
<div id="DialogView">
<p>{{ForPart}}</p>
<ul ng-repeat="item in History">
<li>{{item.Date}}/{{item.Todo}}</li>
</ul>
</div>
Controller 類，僅產生物件。
function toLog(obj: any) {
console.log(obj);
}
module My.Helpers {
export interface I001 {
History: M001[];
//Partial Tip
ForPart: string;
//Init Dialog
InitDialog: () => void;
}
export class M001 {
Date: string;
Todo: string;
constructor(pDate:string, pTodo:string) {
this.Date = pDate;
this.Todo = pTodo;
}
}
export class A001 {
constructor($scope: I001) {
console.log($scope);
$scope.History = [];
$scope.History.push(new M001("01", "A"));
$scope.History.push(new M001("02", "B"));
$scope.History.push(new M001("03", "C"));
$scope.History.push(new M001("04", "D"));
$scope.History.push(new M001("05", "E"));
$scope.History.push(new M001("00", "Z"));
$scope.ForPart = "Angular to Partial";
}
}
}
Partial View 控制 UI 類
function toLog(obj: any) {
console.log(obj);
}
declare var $;
module My.Helpers {
export class Dialog {
Name: string;
SetTitle(pTitle: string): void {
$(this.Name).dialog({"title":pTitle});
}
Open(): void {
$(this.Name).dialog("open");
}
constructor(pName: string) {
this.Name = pName;
$(this.Name).dialog({ autoOpen: false });
}
}
}