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="data: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
Angularjs集成第三方js插件之Uploadify的更多相关文章
- vue项目引入第三方js插件,单个js文件引入成功,使用该插件方法时报错(问题已解决)
1.引入第三方js文件,npm安装不了 2.控制台显示引入成功 3.在methods下使用 图片看不清请看下面代码 updateTime() { setInterval(()=>{ var cd ...
- [转]Vue之引用第三方JS插件
1.绝对路径引入,全局使用. 在index.html文件中使用script标签引入插件. 该种方式就是上面演示ckplayer插件使用的方式. 备注: 这种方式的引用,会在开启ESLint时,报错,可 ...
- 【翻译】在Ext JS集成第三方库
原文地址:http://www.sencha.com/blog/integrating-ext-js-with-3rd-party-libraries/ 作者:Kevin Kazmierczak Ke ...
- dedecms织梦第三方登录插件-QQ登录、微博登录、微信登录
织梦程序集成第三方QQ登录.微博登录.微信登录,获取QQ.微博.微信,并存储至数据库,一键注册为网站会员,不用再次填写绑定信息,方便粘贴用户更强. 织梦第三方登录效果 第三方登录插件特点 1.所有文件 ...
- [译]MVC网站教程(四):MVC4网站中集成jqGrid表格插件(系列完结)
目录 1. 介绍 2. 软件环境 3. 在运行示例代码之前(源代码 + 示例登陆帐号) 4. jqGrid和AJAX 5. GridSettings 6. ...
- 购物车增加、减少商品时动画效果:jQuery.Fly.js插件使用方法
某些电商网站加入购物车和减少购物车商品数量时,有个小动画,以抛物线形式增减,如图: 这里用到了第三方jQuery.Fly.js插件(底层依赖Jquery库,地址:https://github ...
- DWZ(JUI) 教程 中如何整合第三方jQuery插件
Query插件一般是$(document).ready()中初始化 $(document).ready(function(){ // 文档就绪,初始化jQuery插件| }); // 或者或缩写形 ...
- 使用Angularjs和Vue.js对比
使用Angularjs和Vue.js对比 之前项目都是使用Angularjs,(注明此处主要讲Angularjs 1)在初步使用Vue.js后做一个简答的对比笔记. 首先从理论上简单说一下各自的特点, ...
- 基于Metronic的Bootstrap开发框架经验总结(18)-- 在代码生成工具Database2Sharp中集成对Bootstrap-table插件的分页及排序支持
在我们开发系统界面,包括Web和Winform的都一样,主要的界面就是列表展示主界面,编辑查看界面,以及一些辅助性的如导入界面,选择界面等,其中列表展示主界面是综合性的数据展示界面,一般往往需要对记录 ...
随机推荐
- 主机和docker容器拷贝文件
从主机复制到容器sudo docker cp host_path containerID:container_path 从容器复制到主机sudo docker cp containerID:conta ...
- SPSS--回归-多元线性回归模型案例解析
多元线性回归,主要是研究一个因变量与多个自变量之间的相关关系,跟一元回归原理差不多,区别在于影响因素(自变量)更多些而已,例如:一元线性回归方程 为: 毫无疑问,多元线性回归方程应该为: 上图中的 x ...
- (最短路) Heavy Transportation --POJ--1797
链接: http://poj.org/problem?id=1797 Heavy Transportation Time Limit: 3000MS Memory Limit: 30000K To ...
- codevs 1083
这道题是看了人家大牛的解题报告: 对了,要说明一下,(A+B)&1 ,表示,判断(A+B)是奇数否? 下面给出代码: #include<iostream> #include< ...
- EBS 中查看LOV中的查询语句
http://blog.csdn.net/shishun123/article/details/6874824 一直有实施顾问询问我XXForm的XX LOV是什么逻辑,取数SQL是什么来着,以前比较 ...
- 面向对象编程思想(前传)--你必须知道的javascript(转载)
原文地址:http://www.cnblogs.com/zhaopei/p/6623460.html阅读目录 什么是鸭子类型 javascript的面向对象 封装 继承 多态 原型 this指向 ...
- Elasticsearch 健康状态处理
笔者在自己的 ubuntu 服务器上使用 GET /_cat/health?v 命令时,返回值如下所示 可以看到集群状态为 yellow,这是什么意思呢?原来在 es 的集群状态中,有三种情况,官网描 ...
- Sublime Text 3 格式化HTML CSS JS 代码
一,首先通过ctrl+shift+p 要等一会就会出现插件安装界面 二,在插件安装输入框,输入:HTML-CSS-JS Prettify 并安装该插件 三,如果没有装nodejs, 下载nodejs ...
- Jersey构建restful风格的WebSerivices(二)
一. 总体说明 XML和JSON 是最为常用的数据交换格式.本例子演示如何将java对象,转成XML输出. 二.流程 1.在上文的例子中,创建一个包“com.waylau.rest.bean” 2.在 ...
- 一起学习MVC(2)Global.asax的学习
在Global.asax.cs文件中 protected void Application_BeginRequest(Object sender, EventArgs e) { ...