在一个静态见面上做数据分析，由于前后端分离 前端使用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);         }     } });

三方插件直接在app.controller中使用是无效的

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"]);

Angularjs 如何调用三方插件 laypage，实现思路是既然在内部初始化无效，则使用外部初始化，并设置全局变量

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语法

<script type="text/template" id="template">     <div class="treeview-item">         <i class="btn-expand" action="toggleExpand" tag="{{tageId}}" ng-click="getChildTemplate($event)"></i>         <span class="label-name" action="detailItem">{{tageName}} </span>     </div>     __CONTENT__ </script>

2，动态Html语法
 

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

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

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