Angularjs 与三方js插件配合使用,并通过模板动态解析angularjs 语法

在一个静态见面上做数据分析，由于前后端分离 前端使用Angularjs框架，后端使用RESTFUL，如图

A:在分页上遇到要使用三方分页插件

laypage

var laypage;
layui.use('laypage',function(){laypage = layui.laypage ;
});
laypage.render({elem: 'pageDetail' //分页容器的id,count: page.count //总页数,skin: '#41cac0' //自定义选中色值,theme: '#41cac0',curr: page.page//,skip: true //开启跳页,jump: function(obj, first){if(!first){$scope.pro(obj.curr);}}
});

var app = angular.module('datas',[]).controller('DatasController',function($scope,$http){//这里初始化是无效的，laypage undifined//var laypage;//layui.use('laypage',function(){ laypage = layui.laypage ; }); } 
angular.bootstrap(document,["datas"]);

var laypage;
layui.use('laypage',function(){laypage = layui.laypage ;
});
//TODO 关键点是通过这里向Controller传值laypage
app.value('laypage',laypage);
angular.bootstrap(document,['datas']); 
这样就可以在Controller内部通过 laypage.render() 方法调用laypage插件
$scope.page = function(){var page = $scope.condition;laypage.render({elem: 'pageDetail' //分页容器的id,count: page.count //总页数,skin: '#41cac0' //自定义选中色值,theme: '#41cac0',curr: page.page//,skip: true //开启跳页,jump: function(obj, first){if(!first){$scope.pro(obj.curr);}}});
}

B 关于模板解析

1，模板内容包含angularjs语法

var result = $("#template").html();
//todo 替换template中的值 
$("#templateItems").html(result);

3以上写法，由于template中包含ng-click 语法，执行网页动态脚本添加的时候，是已经编译过的网页内容，Angularjs无法识别到ng-click，则无法调用对应的方法，修改代码如下

$("#templateItems").html($compile(result)($scope)）;

原文发布时间为：2018年03月20日
原文作者：  ReSky 

本文来源：开源中国 如需转载请联系原作者

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！