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组件才能正常工做。