上一篇文章已经说了，准备让easyUI与angularJS来一次亲密接触，当我搭建好了easyUI最经典的界面（layout的north、west、center）之后开始引入angularJS，结果他俩就给我来了一个当头一棒，本来好好的layout全屏页面居然直接就缩到了浏览器左上角的一小块，这个问题有点搞笑了，在思考了十分之一炷香之后发现了问题的所在，并且很快修复，其实我也没干别的事情，就是之前把jquery和easyUI的JS引用放在了angularJS的前面，十分之一炷香之后果断把angularJS的引用放在了jquery和easyUI的前面，在我一句呵呵哒之后继续下面的工作。
下面的工作就是west加载功能列表，center放tab页签，加载功能列表点击后的具体页面，于是问题又出现了，tabs.add中href是远程的模板地址代码如下：
$('#mainTab').tabs('add',{
title:menu.name,
href:menu.url,
closable:true,
cache:false,
id:'mainTab-'+menu.id
});
而我的每个功能模板使用一个angularJS的controller进行控制，我们都知道，tabs创建新的tab的时候如果传href参数远程异步加载的话angularJS是无法渲染的，也就是说当页面加载成功之后，没有被angualrJS渲染，所以angularJS也就无法控制该页面，索性easyUI的tabs组件有onLoad事件，可以在异步加载页面成功后回调该事件，参数是当前被加载的TAB，这就好办了，tabs的每一个tab都是一个panel组件，直接使用该tab.panel(‘body’).html()就可获取当前tab的HTML内容，然后使用angularJS提供的$compile方法对该页面进行渲染，代码如下：
$('#mainTab').tabs({
onLoad:function(ele,me){
var obj=ele.panel('body').html();
obj=$compile(obj)($scope);
$scope.$apply();
}
});
这种方式可以保证tab被异步加载后执行部分angularJS渲染，但是奇怪的是页面的尖括号双向绑定无法使用，只能正常使用ng-开头的一些指令，同时表单如果使用了easyUI的表单的话是无法使用ng-model的，原因是easyUI对表单渲染的方式是保留原表单的内容并重新创建新的easyUI表单到页面上，所以在表现上来看并不是ng-model渲染不成功，只是你页面上看到的表单内容并不是你代码里写的，不过鉴于easyUI有自己的表单控制素有用不用angularJS的双向绑定也无所谓，可以用另一种方式去控制model。
综上，easyUI和angularjS的混搭使用，angularJS只能当做控制层来使用，表现层级model绑定最好别交给easyUI来使用，既然是两种不同的框架那就只能取其交际使用方为上策。
