Angularjs整合第三方外掛 Uploadify

航空母艦發表於2015-03-26
AngularJS

有時候需要用一些第三方外掛，比如datepicker，slider，或者tree等。以前的做法是直接通過jquery取得某個元素，然後呼叫某個方法即可。但在angularjs中，不能直接這麼寫，必須寫在directive中。

angularJs第三方外掛 http://ngmodules.org 開源專案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”錯誤，樓主本人就被卡在這兒半天！鑑於樓主本人水平有限，如有錯誤的地方請大家指正！

 

 
 

相關文章