ng-clip angualr 的copy功能

时间:2023-03-10 07:05:38
ng-clip  angualr 的copy功能

  每次写博客都想由衷的给我的老大膜拜一番!以前刚开始做angular的项目的时候就有说要有点击复制的功能因为当时菜啊,不懂啊。也就没做,今天老大又给了我一个资料!“ng-clip”。跟着老大最大的收获就是看文档,在我前面的博客里就有说道学习的方法,文档贼他娘的重要了,实施也的确是这样,只是有时候不知道文档在哪那就海逼了,玩完了。好了废话不多说,开始说正事!

  首先将文档的地址告诉大家以免小弟的英语不好,讲解不透,方便大家自己看   https://github.com/asafdav/ng-clip                     总感觉github就是牛,什么东东都有!宝贝啊》、!!!!

ng-clip  angualr 的copy功能

那么大的字做介绍,不用我解释大家也知道这个做什么的了吧。及时angularjs  的大牛自己写的directive 给封装起来的,感谢这些大牛的无私奉献。大牛万岁。下面是步奏

Step1:三种安装方式

         a:bower 安装 bower install zeroclipboard ng-clip    //我介意大家  bower install zeroclipboard ng-clip --save  这样写省的自己手动的在bower.json里面引入

b:npm  安装 npm install zeroclipboard ng-clip    //又要废话了‘这里又要感谢阿里的大牛们了’有时候我们有些东西安装不了这时候阿里的镜像就可以救你了首先

npm install -g 【cnpm】 --registry=https://registry.npm.taobao.org;你可以将cnpm 换成任何你想装的当然直接将npm封装成cnpm以后就可以直          接用cnpm了,比如上面的命令直接写成   cnpm install zeroclipboard ng-clip   就ok了

c:直接script引入   https://cdnjs.cloudflare.com/ajax/libs/ng-clip/0.2.6/ng-clip.min.js

Step2:在index.html里引入刚才下载的ng-clip.js  ZeroClipboard.js :

Step3:更改.swf的本地路径在app.js内

ng-clip  angualr 的copy功能

Step4: 将ngClipboard 作为dependency 添加到module中
ng-clip  angualr 的copy功能

Step5:添加clip-copy  指令到你项目的任意地方进行copy功能。(这里就是文档不清晰的地方)

ng-clip  angualr 的copy功能

在controller层内给myCopy 赋值就好了 比如 $scope.myCopy = 'fuck';当你点击的时候就会将fuck 复制到你的粘贴板了,当然在这个指令里还包含了方法和回调 看代码

ng-clip  angualr 的copy功能

甚至你可以直接复制一个HTML

ng-clip  angualr 的copy功能

感谢大家!有什么大家可以交流stephen.jiang@fengex.com