AngularJS封装UEditor

<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>ueditor</title> <style type="text/css"> button { border-radius: 2px; background: #0B70B1; color: #FFF; border:…

angularjs封装bootstrap官网的时间插件datetimepicker

背景:angular与jquery类库的协作第三方类库中,不得不提的是大名鼎鼎的jquery,现在基本上已经是国内web开发的必修工具了.它灵活的dom操作,让很多web开发人员欲罢不能.再加上已经很成熟的jquery UI 库和大量jquery 插件,几乎是一个取之不尽用之不竭的宝库.然而,它是否能与angularjs结合呢? 很多angularjs原教旨主义者对此持否定态度.他们认为,既然已经使用了angularjs做web应用框架,那就必须避免其他类库的干扰,做纯净的MvvM模式应用.任…

AngularJS封装webupload实现文件夹上传

百度的webupload没有开放api获取整个文件夹的信息.本文是二次开发webupload实现获取文件夹信息. 指令封装 /** * @license lx.ui.framework v1.0.0 * (c) 2017-2018 lx, Inc.n * @author lx */ (function(window, undefined ) { 'use strict'; //设置lx.ui.upload的配置信息 var $$runtime = {file:'/api/1.0/upload/a…

angularjs 与 UEditor开发，添加directive，保证加载顺序正常

'use strict'; angular.module('app.core').directive('ueditor', [function () { return { restrict: 'A', require: 'ngModel', link: function (scope, element, attrs, ctrl) { var _initContent = ''; var editor; var editorReady = false; ctrl.$render = functio…

Angularjs: 封装layDate指令

[摘要]由于业务需要,将bootstrap-datetimepicker改成了layDate. layDate是一个较成熟且便于操作的jQuery日期插件,支持同一个视图内范围选择.封装成一个指令在多处调用. .directive('defLaydate', function() { return { require: '?ngModel', restrict: 'A', scope: { ngModel: '=', }, link: function(scope, element, attr,…

Echart的angularjs封装

ehcart是百度做的数据图表,基于原生js.接口和配置都写的很好很易读,还可以用于商用. 下面正题用原生js的话,引入echarts.js 无论是图表的样式设置,图表渲染,数据填充都是基于echart对象的option的,官网给出使用方法: var dom = document.getElementById('intro-chart'); var chart = echarts.init(dom); chart.setOption({ backgroundColor: '#08263a',…

AngularJS指令封装高德地图组件

1 概述公司移动门户原来是基于AngularJS指令封装的百度地图组件,用于签到.签退.定位等功能,在使用过程中发现百度地图频繁的弹出广告,所以打算重新引用其它地图组件,最后决定基于AngularJS指令来封装高德地图组件,本文主要与大家分享我的学习思路及开发具体过程. 注意:本文假定读者基本掌握html.css.js以及angularjs,了解百度.高德或者腾讯地图JS API的基本概念. 2 开发思路由于之前没有开发过地图组件,所以在开发之前需要做好学习计划,预想下开发组件时可能会遇到的…

angularjs之filter过滤器

现在公司用ionic,就是基于angularjs封装了一些api用于webapp,最近用的angularjs的filter确实省了很多代码,现在总结一下! ng比较鸡肋的过滤器,这里就一笔带过吧!鸡汤类常用的filter后面上例子. lowercase(小写) {{ lastName | lowercase }} uppercase(大写) {{ lastName | uppercase }} number(格式化数字) number过滤器可以为一个数字加上千位分割,像这样,123,456,78…

angularJs：双向数据绑定

示例1 <!DOCTYPE html> <html ng-app> <head> <meta charset="UTF-8" /> <title>AngularJS的特性之:双向绑定</title>  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0…

Angularjs 与Ckeditor

Angularjs 与Ckeditor Angularjs 诞生于Google是一款优秀的前端JS框架,已经被用于Google的多款产品当中.AngularJS有着诸多特性,最为核心的是:MVC.模块化(Module机制).自动化双向数据绑定.语义化标签(Directive).依赖注入.路由(Route)机制.服务(services)机制等等.以前也用过Jquery.Extjs等,现在刚开始接触AngularJS,感觉这是一个很吸引人的一个框架. 学习网址: http://www.angular…

vue 中使用百度编辑器 UEditor

(单页应用,多编辑器也可行) 新建一个Ueditor.vue组件对象,该组件用来封装ueditor,用来进行复用. <template> <div>  <script :id="randomId" type="text/plain"></script> </div> </template> <script> //需要修改 ue…

Extjs6 编写自己的富文本组件（以ueditor为基础）

一.下载ueditor 地址:http://ueditor.baidu.com/website/ 二.将ueitor资源引入自己的项目在index.html中引入ueditor.config.js.ueditor.all.js.语言包(例如中文)zh-cn.js 三.编写Ext富文本组件首先想好自己的组件中是否还需要包含Ext的组件,本组件不需要,所以继承Ext.Component进行开发根据ueditor文档,ueditor是script标签进行初始化,所以将此组件标记为script a…

vue集成ueditor

相关代码见github 1.引入ueditor相关的文件,具体目录见下图如下我将下载的文件放在static下面,这里专门用来放置相关的静态文件 (在ueditor.config.js需要配置一下路径 var URL = window.UEDITOR_HOME_URL || '/static/ueditor_1/')根据自己的文件路径各自处理…

AngularJS的思考

AngularJS实践什么是AngularJS AngularJS的核心理念是什么? 在我看来,Angualr的核心思想是:Template + Scope => HTML, Template就是各种可以复用的模板,Scope就是数据. WEB前端原本是DOM构成一个树形结构,然后数据杂乱分布. 开发者用JQuery之类的工具在DOM上添加各种各样的数据(data, trigger, listener)等.当网页的结构复杂起来之后,各种数据之间的关联错综复杂,到最后几乎没有人可以说清楚这个庞然…

AngularJS 指令解析（一）

AngularJS 指令解析(一) 前言笔者AngularJS接触时间差不多是两年多,虽然这两年多AngularJS版本日新月异,但是笔者的版本是比较老的1.4.3,一方面是自己对这个版本比较熟悉,另一方面是老项目需要维护,当然本文笔者也尽可能地写到通俗易懂,毕竟AngularJS在很多设计上也有独到之处,但是人无完人,笔者可能有疏漏的话,烦请提醒留言.下面回归正文,总体而言,AngularJS在设计上有两点比较重要的地方,分别是指令(directive)和作用域(scope).directi…

深入了解angularjs中的$digest与$apply方法，从区别聊到使用优化

壹 ❀ 引如果有人问,在angularjs中修改模型数据为何视图会同步更新呢,我想大多数人一定会回答脏检查(Dirty Checking)相关概念.没错,在angularjs中作用域(scope)作为链接控制器(controller)与视图(view)之间的桥梁,除了绑定数据监听事件外,一旦有数据发生改变,scope还兼顾了脏检测更新视图的职责,这是我们宏观的理解. 这就引发了一系列的问题,以点击事件为例,为什么在angularjs中用原生click事件达不到更新视图的效果?ng-click…

品优购商城项目（二）AngularJS、自动代码生成器、select2下拉多选框

品优购商城想项目第二阶段 AngularJS.自动代码生成器.select2下拉多选框完成了课程第三天.第四天的的任务. 1.学习了AngularJs前端的mvc分层思想,js部分分成controller和service层,并且可以继承,调用.代码层次非常清晰. 2.掌握了自动代码生成工具HeimaCodeUtil_V2.4_32 可以选择生成多种结构的代码,对于简单的后台增删改查足够用了.使用该工具首先测试数据库连接,然后再选择数据库进入页面,选择生成类型.最后把生成的文件copy到项目中…

ionic之$ionicGesture手势（大坑）

鄙人来本公司前未用过ionic框架,但由于ionic是基于angularjs封装的,正好我用过angularjs,很荣幸的面试就过了,然后通过该网站http://www.ionic.wang(后面简称网站i)边学ionic边做项目. ionic刚踩过的坑--$ionicGesture!现总结下$ionicGesture,希望对用到该框架的童鞋有所帮助! 网站i对$ionicGesture的介绍如下: 在一个元素上添加一个事件监听器. $ionicGesture.on(eventType, cal…

使用CSS3 制作一个material-design 风格登录界面

心血来潮,想学学 material design 的设计风格,就尝试完成了一个登录页面制作. 这是整体效果. 感觉还不错吧,结尾会附上代码在编写的过程中,没有使用任何图片或者字体图标,全部使用css3完成,还是遇到一些难点和bug,所以想笔记下来,以后方便查阅. 响应式设计在这个页面中,使用下面3点来完成响应式设计最大宽度 .设定了一个 max-width 的最大宽度,以便在大屏幕时兼容. margin : 20px auto; 使其保持时刻居中组件使用像素关于响应式的设计要点还有很多…

百度数据可视化图表套件echart实战

最近我一直在做数据可视化的前端工作,我用的最多的绘图工具是d3.d3有点像photoshop,功能很强大,例子也很多,但是学习成本也不低,做项目是需要较大人力投入的.3月底由在亚马逊工作的同学介绍下使用了一下echart,一个由百度前端发起的canvas国产类库(官网:http://echarts.baidu.com/index.html).这个echart其实是在canvas类库zrender的基础上做的主题图库,优点有数据驱动,图例丰富,功能强大,支持数据拖拽重计算,数据区域漫游,全中文文档…

【原创】angularjs1.3.0源码解析之directive

# Angular指令编译原理前言 angular之所以使用起来很方便,是因为通常我们只需要在html里面引入一个或多个(自定义或内置的)指令就可以完成一个特定的功能(这也是angular推荐的方式),比如:一个简单的双向绑定(用ng-model指令),或者模板循环渲染(用ng-repeat指令),又或者是模板是否显示(用ng-if指令),而对于这些指令的内部实现一般我们无需太多关心(除非你想深入了解),我们更乐意于把侧重点放在指令如何使用(即API)上. 我们知道一个应用是由多个功能组成的,…

Ionic项目中使用极光推送

Ionic项目中使用极光推送-android 对于Ionic项目中使用消息推送服务,Ionic官方提供了ngCordova项目,这个里面的提供了用angularjs封装好的消息推送服务(官方文档),使用的是GitHub上的 PushPlugin 插件,也有相关的实现实例:GitHub地址 ,但是使用的是Google的GCM消息推送服务,一些网络原因,国内GCM可能不怎么好用(自己也没有试可不可以). 于是选择国内的消息推送服务,主要有:百度云推送,腾讯信鸽,极光推送,yunba 等等,其中只…

Ionic项目中使用极光推送-android

对于Ionic项目中使用消息推送服务,Ionic官方提供了ngCordova项目,这个里面的提供了用angularjs封装好的消息推送服务(官方文档),使用的是GitHub上的 PushPlugin 插件,也有相关的实现实例:GitHub地址 ,但是使用的是Google的GCM消息推送服务,一些网络原因,国内GCM可能不怎么好用(自己也没有试可不可以). 于是选择国内的消息推送服务,主要有:百度云推送,腾讯信鸽,极光推送,yunba 等等,其中只有极光推送官方提供了phonegap/cordov…