转载注明：（罗志强的博客）

angularjs的指令directive非常好使，可以很方便的结合各种插件，实现很强大的功能。 今天用到了plupload，就拿它举例吧。

正常的plupload用法应该是这样的

var uploader = new plupload.Uploader({  runtimes : 'html5,flash,silverlight,html4',browse_button : 'pickfiles', url : "/examples/upload",
});
uploader.init();

而在Angular里面，直接这么写，似乎不太优美，也不符合封装成组件的要求。 那么我们就给plupload做成angular的指令(web组件)。

这里需要注意的是，不要将初始化操作放到Controller里面，否则它可能出错，很多封装其他插件成angular组件时，就是因为初始化顺序问题，导致各种报错。controller的执行在link之前。

var app = angular.module('plupload', []);
/*** 文件上传指令* @return {[type]}           [description]*/
app.directive('plupload', ['$timeout', function($timeout) {  return {restrict: 'A', // E = Element, A = Attribute, C = Class, M = Commentlink: function($scope, iElm, iAttrs, controller) {var uploader = new plupload.Uploader({runtimes: 'html5,flash,silverlight,html4',browse_button: 'uploadfile',url: 'upload.php',multi_selection: false,filters: {max_file_size: '10mb',mime_types: [{title: "Image files",extensions: "jpg,gif,png"}, {title: "Zip files",extensions: "zip"}]},flash_swf_url: '/plupload/Moxie.swf',silverlight_xap_url: '/plupload/Moxie.xap',init: {FilesAdded: function(up, files) {uploader.start();},UploadComplete: function(up, files) {}}});uploader.init();}};
}]);

这样上传插件就算封装完成了。使用的时候，就先引入模块文件，然后引入模块

var app = angular.module('app', [  'plupload'
]);

使用的时候像下面这样。

<button class="btn btn-primary btn-sm" id="uploadfile" plupload>本地上传</button>

如果在 模块app的作用域下， plupload指令就会生效了。

上面代码是从项目里面拿出来修改的，没有经过测验。方便借鉴，如果有什么疑问，联系：(fermi)294052929@qq.com