Angularjs集成第三方插件 Uploadify-阿里云开发者社区

开发者社区> 航空母舰> 正文

Angularjs集成第三方插件 Uploadify

简介:
+关注继续查看

有时候需要用一些第三方插件,比如datepicker,slider,或者tree等。以前的做法是直接通过jQuery取得某个元素,然后调用某个方法即可。但在AngularJS中,不能直接这么写,必须写在directive中。

angularJs第三方插件 http://ngmodules.org 开源项目Angular-ui( https://github.com/angular-ui/angular-ui)中已经集成了很多第三方插件,大家有兴趣的可以去看看,接下来我要说的是如何在Angular中集成Uploadify

Java代码  收藏代码
  1. var snailApp= angular.module("snail",[....]);  
  2.    
  3. snailApp.directive("snailUploadify", function() {  
  4.     return {  
  5.         require: '?ngModel',  
  6.         restrict: 'A',  
  7.         link: function ($scope, element, attrs, ngModel) {  
  8.             var opts = angular.extend({}, $scope.$eval(attrs.nlUploadify));  
  9.             element.uploadify({  
  10.                 'fileObjName': opts.fileObjName || 'upfile',  
  11.                 'auto': opts.auto!=undefined?opts.auto:true,  
  12.                 'swf': opts.swf || '/Plugin/uploadify/uploadify.swf',  
  13.                 'uploader': opts.uploader || '/Admin/Uploader/ImageUp',//图片上传方法  
  14.                 'buttonText': opts.buttonText || '本地图片',  
  15.                 'width': opts.width || 80,  
  16.                 'height': opts.height || 25,  
  17.                 'onUploadSuccess': function (file, d, response) {  
  18.                     if (ngModel) {  
  19.                         var result = eval("[" + d + "]")[0];  
  20.                         if (result.state == "SUCCESS") {  
  21.                             $scope.$apply(function() {  
  22.                                 ngModel.$setViewValue(result.url);  
  23.                             });  
  24.                         }  
  25.                     }  
  26.                 }  
  27.             });  
  28.         }  
  29.     };  
  30. });  

 调用方法:

Java代码  收藏代码
  1. <div id="uploadifytest" class="btn" ng-model="image" snail-uploadify="{auto:false,buttonText:'图片上传'}" >  
<img ng-show="image" ng-src="image"  style="height: 80px;"/>
注意:上面集成的uploadify中只调用了部分参数,大家可以根据需要添加,另外在调用该插件时必须在调用元素上添加id,否则会报“Could not find the placeholder element”错误,楼主本人就被卡在这儿半天!鉴于楼主本人水平有限,如有错误的地方请大家指正!

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
【Mongo】uploadify插件帮助实现批量上传
<span style="font-family:楷体; font-family:楷体; font-size:19px; line-height:27px; widows:auto">   <strong>【项目需求】</strong></span> <div style="font-family:楷体; font-size:19px; line-height:27px; widows:
1663 0
阿里云服务器怎么设置密码?怎么停机?怎么重启服务器?
如果在创建实例时没有设置密码,或者密码丢失,您可以在控制台上重新设置实例的登录密码。本文仅描述如何在 ECS 管理控制台上修改实例登录密码。
4075 0
[转载]Grunt插件之LiveReload 实现页面自动刷新,所见即所得编辑
配置文件下载  http://vdisk.weibo.com/s/DOlfks4wpIj LiveReload安装前的准备工作: 安装Node.js和Grunt,如果第一次接触,可以参考:Windows下安装Grunt的指南和相关说明,根据步骤操作,创建完package.json 和 Gruntfile.js这2个文件就行。
737 0
第八章 让Bootstrap轮播插件carousel支持左右滑动手势的三种方法
因为最近开发的项目涉及到移动设备上的 HTML5 开发,其中需要实现轮播效果。然后最快捷的方式,你知道的(Bootstrap),然后原生的 Bootstrap 的 carousel.js 插件并没有支持手势。
1060 0
[Android]Gradle 插件 DiscardFilePlugin(class注入&清空类和方法)
以下内容为原创,欢迎转载,转载请注明 来自天天博客:http://www.cnblogs.com/tiantianbyconan/p/6732128.html Android Gradle 插件 DiscardFilePlugin(清空类和方法) An android gradle plugin for discard class or method in compile time. 用于在编译构建时期忽略清空类和方法的一个Android Gradle插件。
810 0
功能强大的文件上传插件带上传进度-WebUploader
WebUploader是由Baidu WebFE(FEX)团队开发的一个以HTML5/FLASH构建的现代文件上传组件。
1320 0
阿里云服务器端口号设置
阿里云服务器初级使用者可能面临的问题之一. 使用tomcat或者其他服务器软件设置端口号后,比如 一些不是默认的, mysql的 3306, mssql的1433,有时候打不开网页, 原因是没有在ecs安全组去设置这个端口号. 解决: 点击ecs下网络和安全下的安全组 在弹出的安全组中,如果没有就新建安全组,然后点击配置规则 最后如上图点击添加...或快速创建.   have fun!  将编程看作是一门艺术,而不单单是个技术。
4518 0
使用OpenApi弹性释放和设置云服务器ECS释放
云服务器ECS的一个重要特性就是按需创建资源。您可以在业务高峰期按需弹性的自定义规则进行资源创建,在完成业务计算的时候释放资源。本篇将提供几个Tips帮助您更加容易和自动化的完成云服务器的释放和弹性设置。
7828 0
Maplace.js – 小巧实用的 jQuery 谷歌地图插件
  Maplace.js是一个小的显示谷歌地图的 jQuery 插件,帮助你把谷歌地图嵌入到你的网站,快速在地图位置上创建标记和控制菜单。它需要 jQuery 和谷歌地图 API v3 支持,所以这两个都需要引入到你的页面。
1001 0
界面绝佳、体验超棒的HTML5上传插件zyUpload
好插件推荐 插件描述:支持多图片上传、拖拽上传、剪辑、编辑,上传预览,编辑获取默认值等功能,并且每一个功能对应一个demo,简单易懂,方便学习修改 多图上传预览 图片发自简书App 删除 图片发自简书App 拖拽上传 图片发自简书App 插件下载 :http://www.
1063 0
+关注
514
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
文娱运维技术
立即下载
《SaaS模式云原生数据仓库应用场景实践》
立即下载
《看见新力量:二》电子书
立即下载