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有版权的，使用前请三思，壕者可以去购买！！！非常接近原生，好用。（推荐还是购买得好，免得。。。）

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