AngularJS和EasyUI结合使用的注意点-CSDN博客

为什么80%的码农都做不了架构师？>>>

最近在着手用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组件的正常显示的，如下效果：