angular結合easyui這事其實並不是很合適，因為：angular的特點之一是雙向綁定，頁面元素與頁面邏輯之間解耦；easyui是對頁面元素進行封裝，甚至一些組件是隱藏了原本的dom元素，初始化時創建新的元素來實現功能的。在某種程度上來說，angular和easyui在工作原理上是沖突的，當然，下面就是但是了，不然就不太好往下寫了。
但是，easyui的驗證控件validatebox的驗證控件提示明顯，UI效果比較友好，而且不會影響angular的正常工作，所以我對用這兩個結合做驗證非常喜歡。
好了，正式開始，首先添加引用：
<script src="/js/jquery-1.7.2.js" type="text/javascript"></script>
<script src="/js/jquery.easyui.min.js" type="text/javascript"></script>
<script src="/js/angular/angular.js" type="text/javascript"></script>
然后是頁面元素，只需要給對應的DOM元素指定屬性並設置驗證規則：
//controller當然是必須的
<table rules="none" ng-controller="invoiceController" class="styleEntireWidth">
<select class="easyui-validatebox styleWiden" ng-model="basic.applyState" ng-options="c.value as c.text for c in dict.applyStateData"
id="applyState" name="applyState" data-options="required:true,missingMessage: '請選擇申請狀態.'">
<option value="">-- 請選擇 --</option>
</select>
此時，可以看到展現效果
圖片：
為了讓界面更友好，使用更方便，我使用了easyui的Form組件
<div class="easyui-panel" title="發票開具申請" style="padding: 0px;"
data-options="iconCls:'icon-save',collapsible:true" id="ng-app" ng-app="invoice">
JS腳本如下：
JQuery(function () {
JQuery('#ng-app').form('validate');
var width = window.screen.availWidth * 0.9;
var height = document.body.offsetHeight * 0.932;
JQuery('#ng-app').panel('resize', {
width: width,
height: height
});
});
此時效果如下圖：
最后，當有如保存之類操作需要驗證頁面必錄項或格式時，只需要執行以下腳本：
$scope.SavePageData = function (controlID) {
var isValid = JQuery('#ng-app').form('validate');
if (isValid) {
......
}
};
腳本中的isValid返回的驗證結果:true or false，此時，驗證不通過也不需要額外提示，因為界面上的提示已經足夠明顯。
至於這腳本中另外一個問題：angular的controller中最好不要直接對DOM元素進行操作，我覺得已經有足夠的理由在這里妥協了，並且只有這一句代碼而已，不會有太多不好的影響，至於angular用於針對DOM元素操作的指令directive,我沒想到這里怎么用更方便，大家有好的想法，也請指點一下。