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

posted @ 2013-07-22 22:01  狂奔滴蜗牛  阅读(3900)  评论(2编辑  收藏  举报