AngularJS和EasyUI結合使用的注意點

    最近在着手用angular重構一個項目，原來的前臺是純easyui作的，最近花了一週學了angular，決定把它們結合下，用純html 和 暴露後臺rest api搞起。結果在ng-view多頁切換的時候遇到了一個問題，這個問題我在osc的問答區也提問過，結果彷佛也沒什麼回答，因此不了了之。

    我在這裏文裏從新完整地提一下這個問題的現象，在加載首頁以後，點擊切換到第二個模板頁，路由徹底是由angular跳轉的，正常狀況下，用個人代碼顯示應該是這樣：

    可是用了ng-view跳轉後顯示的datagrid頁面是下面這樣的：

    接着我用firebug分析了一下他們之間的html代碼，

正常加載的datagrid：

不正常加載的datagrid：

    對比了正常的class="easyui-datagrid"在頁面加載後會解析成一系列的div來呈現正常的頁面；而在angular中的不正常的class="easyui-datagrid"屬性仍是原樣輸出，

推斷的緣由是：

    在angular路由切換模板後，沒有正經常使用easyui框架的js去從新解析模板頁裏包含在html標籤裏的easyui的class屬性。

其中一種解決方案：拋棄用class="xxx"的html屬性方式來聲明easyui組件，

<table class="easyui-datagrid" title="Basic DataGrid" style="width:700px;height:250px"
data-options="singleSelect:true,collapsible:true,url:'datagrid_data1.json',method:'get'">
<thead>
<tr>
<th data-options="field:'itemid',width:80">Item ID</th>
<th data-options="field:'productid',width:100">Product</th>
<th data-options="field:'listprice',width:80,align:'right'">List Price</th>
<th data-options="field:'unitcost',width:80,align:'right'">Unit Cost</th>
<th data-options="field:'attr1',width:250">Attribute</th>
<th data-options="field:'status',width:60,align:'center'">Status</th>
</tr>
</thead>

     而是用js聲明來初始化，例如：

<table id="dg"></table>
<script type="text/javascript" >
	$('#dg').datagrid({
		url:'datagrid_data1.json',
		columns:[[
		{field:'itemid',title:'itemid',width:100},
		{field:'productid',title:'productid',width:100},
		{field:'listprice',title:'listprice',width:100,align:'right'}
	]]
	});
</script>

     在這種狀況下，是能夠進行easyui組件的正常顯示的，以下效果：

經過JS初始化easyui組件

    大多數的easyui組件應該都是能夠經過js方式來工做，暫時尚未其餘好的方案，若是各位童鞋都更好的方案，歡迎回復給我。

2013-12-27追加，

嘗試把easyui組件以html屬性方式寫進指令，仍然無效

    感謝北落 的回覆，既然他提到了把easyui組件寫進指令裏，雖然我嘗試過了，仍是不行，可是仍是上圖，有圖有真相，順便也當作個記錄。

    這是個人目錄結構，只是個demo，

    往directives.js裏定義一個datagrid指令，用屬性來修飾，它會去調用template.html模板渲染我定義的標籤，

    把原來的代碼註釋掉，只剩一行我定義的指令就能夠工做，，

    下面看下firebug，已經正常調用到template頁了，template頁的代碼同上面註釋掉的代碼，寫到指令裏的確是符合angular的思惟方式，也便於更好的複用，只是easyui組件仍然沒有正確初始化，

即便要寫進指令，固然，推薦是把dom操做都放在指令的js中，你仍然要用js的形式來聲明easyui組件才能正常工做。