easyUI与angularJS整合(1):水火不容篇

 上一篇文章已经说了,准备让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来使用,既然是两种不同的框架那就只能取其交际使用方为上策。