Angularjs集成第三方js插件之Uploadify
有时候需要用一些第三方插件,比如datepicker,slider,或者tree等。以前的做法是直接通过jquery取得某个元素,然后调用某个方法即可。但在angularjs中,不能直接这么写,必须写在directive中。
开源项目Angular-ui( https://github.com/angular-ui/angular-ui)中已经集成了很多第三方插件,大家有兴趣的可以去看看,接下来我要说的是如何在Angular中集成Uploadify(传送门)
var snailApp= angular.module( "snail" ,[....]); snailApp.directive( "snailUploadify" , function () { return { require: '?ngModel' , restrict: 'A' , link: function ($scope, element, attrs, ngModel) { var opts = angular.extend({}, $scope.$eval(attrs.nlUploadify)); element.uploadify({ 'fileObjName' : opts.fileObjName || 'upfile' , 'auto' : opts.auto!=undefined?opts.auto: true , 'swf' : opts.swf || '/Plugin/uploadify/uploadify.swf' , 'uploader' : opts.uploader || '/Admin/Uploader/ImageUp' , //图片上传方法 'buttonText' : opts.buttonText || '本地图片' , 'width' : opts.width || 80, 'height' : opts.height || 25, 'onUploadSuccess' : function (file, d, response) { if (ngModel) { var result = eval( "[" + d + "]" )[0]; if (result.state == "SUCCESS" ) { $scope.$apply( function () { ngModel.$setViewValue(result.url); }); } } } }); } }; }); |
调用方法:
< 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”错误,楼主本人就被卡在这儿半天!鉴于楼主本人水平有限,如有错误的地方请大家指正!
相关传送门:
angular官方网站:http://angularjs.org/
angular官方api:http://docs.angularjs.org/api
angular英文社区:https://groups.google.com/forum/#!forum/angular
angular中文社区:http://www.angularjs.cn/
相关博客:http://www.cnblogs.com/lcllao/archive/2012/10/18/2728787.html
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步