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

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

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

171814_UTTq_152472.png

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日
原文作者:  ReSky 

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


目录
相关文章
|
30天前
|
存储 编译器 Shell
【C++基础语法 枚举】解析 C/C++ 中枚举类型大小值
【C++基础语法 枚举】解析 C/C++ 中枚举类型大小值
14 0
|
26天前
|
机器学习/深度学习 算法 编译器
【C++ 泛型编程 中级篇】深度解析C++:类型模板参数与非类型模板参数
【C++ 泛型编程 中级篇】深度解析C++:类型模板参数与非类型模板参数
46 0
|
26天前
|
设计模式 算法 数据安全/隐私保护
【C++ 引用 】C++深度解析:引用成员变量的初始化及其在模板编程中的应用(二)
【C++ 引用 】C++深度解析:引用成员变量的初始化及其在模板编程中的应用
25 0
【C++ 引用 】C++深度解析:引用成员变量的初始化及其在模板编程中的应用(二)
|
26天前
|
存储 算法 编译器
【C++ 引用 】C++深度解析:引用成员变量的初始化及其在模板编程中的应用(一)
【C++ 引用 】C++深度解析:引用成员变量的初始化及其在模板编程中的应用
36 0
|
24天前
|
JavaScript 前端开发 Web App开发
JavaScript基础语法(codewhy版本)(一)
JavaScript基础语法(codewhy版本)
84 1
JavaScript基础语法(codewhy版本)(一)
|
25天前
|
存储 程序员 编译器
【C++ 模板类与虚函数】解析C++中的多态与泛型
【C++ 模板类与虚函数】解析C++中的多态与泛型
46 0
|
26天前
|
安全 编译器 程序员
【C++ 11 模板和泛型编程的应用以及限制】C++11 模板与泛型深度解析:从基础到未来展望
【C++ 11 模板和泛型编程的应用以及限制】C++11 模板与泛型深度解析:从基础到未来展望
76 0
|
28天前
|
SQL JavaScript
js开发:请解释什么是ES6的模板字符串(template string),并给出一个示例。
ES6的模板字符串以反引号包围,支持变量和表达式插入以及多行书写。例如,插入变量值`Hello, ${name}!`,计算表达式`${num1 + num2}`,以及创建多行字符串。模板字符串保留原始空格和缩进,简化了字符串拼接,提高了代码可读性。
18 6
|
1月前
|
存储 算法 编译器
【C++ 泛型编程 进阶篇】C++模板元编程深度解析:探索编译时计算的神奇之旅
【C++ 泛型编程 进阶篇】C++模板元编程深度解析:探索编译时计算的神奇之旅
86 0
|
1月前
|
JSON JavaScript 前端开发
vue项目使用Print.js插件实现PDF文件打印
vue项目使用Print.js插件实现PDF文件打印
35 0

推荐镜像

更多