mobiscroll插件集成成angularjs指令到项目中使用

最近发现有挺多人找时间插件、联动选择插件、滚动插件。
这里就介绍下怎么把mobiscroll网站中的插件集成成angularjs指令到项目中使用(NOTE:mobiscroll中的 插件都是要$的,所以使用需先三思,版权问题。偶是不负责的)。大家到www.mobiscroll.com网站中下载下来的插件发现都是试用的,而且都带有个trial的字样。
now begin(例:时间插件):
一、先到mobiscroll网站上下载你需要的插件(需注册),有样式可选也可以自定义样式(请选择编写方式为angularjs语言)。
二、把下载好的demo解压,在demo中的html文件以txt方式打开会发现方法都写在里面。
三、去掉trial字,百度也有。在js文件内fromCharCode后的return b;前加上b=b.replace("Math.random()<p", "1<0").replace("new Date()", "true||new Date()");这段代码。(不同IDE不同使用方式,请自行搞定)。
四、在三步txt文件中找出angular.module('mobiscroll-datetime',[]); 类似这样的代码,把mobiscroll-datetime 作为模块依赖到最外层的控制器的angular.module中。
五、txt中找到你需要用到样式块以及控制器的位置。在自己项目中定义一个指令,在指令中设置controller属性,并把txt中对应的控制器$scope.setting属性复制到指令中的controller中,最后把setting属性值设置为txt中样式value的值(note:全部改为字符串形式)。
六、txt中找出关于html中显示的内容,作为模板放到指令中的template属性中。
七、把指令中template对象内(也就是刚才拷贝的html中的内容)的ng-model剪切放到自己项目页面中使用到该指令中,用来绑定你要提交的ng-model值。

在demo中,你会发现你的时间选择器选年份只能多选一年就没了,那怎么办呢,→自己改!!! 在指令中 new Date();随便你怎么改年份。
这里就直接上个指令的图,各位童鞋可以参照这个指令的写法。几乎完美破解+集成!!!这里写图片描述

最后再说一遍,这篇文章只是技术讨论,mobiscroll有版权的,使用前请三思,壕者可以去购买!!!非常接近原生,好用。(推荐还是购买得好,免得。。。)

若有使用问题欢迎留言讨论。~!!!

评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值