有时候需要用一些第三方插件，比如datepicker，slider，或者tree等。以前的做法是直接通过jQuery取得某个元素，然后调用某个方法即可。但在AngularJS中，不能直接这么写，必须写在directive中。
angularJs第三方插件 http://ngmodules.org 开源项目Angular-ui（ https://github.com/angular-ui/angular-ui）中已经集成了很多第三方插件，大家有兴趣的可以去看看，接下来我要说的是如何在Angular中集成Uploadify
Java代码
- 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);
- });
- }
- }
- }
- });
- }
- };
- });
调用方法：
Java代码
- <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”错误，楼主本人就被卡在这儿半天！鉴于楼主本人水平有限，如有错误的地方请大家指正！
![无缝融入，即刻智能[一]：Dify-LLM大模型平台，零编码集成嵌入第三方系统，42K+星标见证专属智能方案](https://ucc.alicdn.com/fnj5anauszhew_20240812_a8db98b02a1249c38f99eccf58b601e0.png?x-oss-process=image/format,webp/resize,h_160,m_lfit)