Angularjs集成第三方插件 Uploadify

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

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

Java代码  Angularjs集成第三方插件 Uploadify
  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代码  Angularjs集成第三方插件 Uploadify
  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”错误,楼主本人就被卡在这儿半天!鉴于楼主本人水平有限,如有错误的地方请大家指正!
上一篇:5.如何使主机和虚拟机IP处于同一网段(内网渗透专用)


下一篇:Linux运维常用命令-linux服务器代维常用到的维护命令