有時候需要用一些第三方插件，比如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

轉載于:https://www.cnblogs.com/lenniu/p/3207556.html

總結

以上是生活随笔為你收集整理的Angularjs集成第三方js插件之Uploadify的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。