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


声明:本文转载自https://my.oschina.net/resky/blog/1647990,转载目的在于传递更多信息,仅供学习交流之用。如有侵权行为,请联系我,我会及时删除。

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

本文发表于2018年03月20日 22:38
(c)注:本文转载自https://my.oschina.net/resky/blog/1647990,转载目的在于传递更多信息,并不代表本网赞同其观点和对其真实性负责。如有侵权行为,请联系我们,我们会及时删除.

阅读 1696 讨论 0 喜欢 0

抢先体验

扫码体验
趣味小程序
文字表情生成器

闪念胶囊

你要过得好哇,这样我才能恨你啊,你要是过得不好,我都不知道该恨你还是拥抱你啊。

直抵黄龙府,与诸君痛饮尔。

那时陪伴我的人啊,你们如今在何方。

不出意外的话,我们再也不会见了,祝你前程似锦。

这世界真好,吃野东西也要留出这条命来看看

快捷链接
网站地图
提交友链
Copyright © 2016 - 2021 Cion.
All Rights Reserved.
京ICP备2021004668号-1