近期工作中使用到的插件总结
表格插件 ng-table
功能：
表格：支持分页、查找、排序等 地址.
使用：
1.安装
bower install ng-table
2.引入
在首页中引入ng-table脚本文件
<script src="bower_components/ng-table/dist/ng-table.min.js"></script>
3.在需要使用的模块中引入 ngTable
在module 中引入ngTable模块，在chontroller中引入NgTableParams
var module = angular.module('myStore', ['ui.router', 'ngTable'])
.controller('WxPages', ['$scope', '$http', 'NgTableParams', '$mdDialog',function($scope, $http, NgTableParams, $mdDialog)
4.初始化
在chontroller中初始化NgTable，表格中的数据必须通过getData参数来获取，在函数中通过$defer返回值，（官方还提供了data参数，但是实际中可能因为使用中无效）
params参数提供了分页查询所需的page（当前页数）、count（每页显示数量）参数
$scope.tableParams = new NgTableParams({
page: 1, // show first page
count: 10 // count per page
}, {
total: data.length,
getData: function($defer, params) {
var newDate = data.slice((params.page() - 1) * params.count(), params.page() * params.count());
$defer.resolve(newDate);
}
});
5.页面使用
在标签内添加 ng-table="tableParams"绑定参数，标题通过title传递，需注意添加两层引号
<table class="table table-hover " ng-table="tableParams">
<tr ng-repeat="item in $data track by item.id" align="center">
<td title="'#'">{{item.id}}</td>
<td title="'操作'">
<a href="#wxPageEdit/{{item.id}}">编辑</a>
<a href="" ng-click="showConfirm($event,item.id)">删除</a>
</td>
<td title="'标题'">{{item.title}}</td>
<td title="'浏览量'">{{item.pv}}</td>
<td title="'创建时间'">{{item.createDate}}</td>
</tr>
</table>
富文本编辑器 百度的ueditor
基本
功能强大的富文本编辑器，配置和扩展功能强大 地址.
使用
2.引入
在页面中引入
<!-- 配置文件 -->
<script src="bower_components/ueditor/ueditor.config.js"></script>
<!-- 主文件 -->
<script src="bower_components/ueditor/ueditor.all.min.js"></script>
<!-- 样式渲染 -->
<script src="bower_components/ueditor/ueditor.parse.min.js"></script>
3.使用
在代码中通过 UE.getEditor('container',params)形式生成编辑器，container为放置ueditor的元素的id，toolbars:[]数组为要显示的菜单项，详细列表见ueditor.config.js文件
通过监听contentChange事件，监测文本内容的变化，赋值给预览界面
var ue = UE.getEditor('edit-rich-text', {
toolbars: [
[
'fullscreen', 'source', '|', 'undo', 'redo', '|',
'bold', 'italic', 'underline', , 'strikethrough', 'removeformat', 'autotypeset', 'blockquote', '|', 'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist', '|',
'rowspacingtop', 'rowspacingbottom', 'lineheight', '|',
'paragraph', 'fontfamily', 'fontsize', '|',
'justifyleft', 'justifycenter', 'justifyright', '|',
'link', '|',
// 'insertimage',
'emotion', 'insertvideo', 'background', '|',
'horizontal', '|',
'inserttable', 'deletetable', 'insertparagraphbeforetable', 'insertrow', 'deleterow', 'insertcol', 'deletecol', 'mergecells', 'mergeright', 'mergedown', 'splittocells', 'splittorows', 'splittocols', '|',
]
],
elementPathEnabled: false,
});
var htm = null;
ue.on('contentChange', function() {
html = ue.getContent();
if (html.length > 0) {
$('.custom-richtext').html(html);
}
});
4.扩展
富文本编辑器中的图片上传功能，配置较为复杂，界面也不符合需求，所以借助插件提供的扩展功能，增加一个图标，调用自己写的图片管理界面，实现图片的上传和选择
UE.registerUI('button', function(editor, uiName) {
//注册按钮执行时的command命令，使用命令默认就会带有回退操作
editor.registerCommand(uiName, {
execCommand: function() {
alert('execCommand:' + uiName)
}
});
//创建一个button
var btn = new UE.ui.Button({
//按钮的名字
name: "上传图片",
//提示
title: "上传图片",
//添加额外样式，指定icon图标，这默认使用原本图片上传的icon
cssRules: 'background-position: -380px 0;',
//点击时执行的命令
onclick: function() {
//这里可以不用执行命令,做你自己的操作也可
//调用我自己写的模态框
$scope.showImgUpload();
}
});
//因为你是添加button,所以需要返回这个button
return btn;
});
<!-- angular material的对话框 -->
$scope.showImgUpload = function(ev) {
var useFullScreen = ($mdMedia('sm') || $mdMedia('xs')) && $scope.customFullscreen;
$mdDialog.show({
controller: ImgDialogController,
templateUrl: 'store/common/imageUploadDialog.html',
parent: angular.element(document.body),
targetEvent: ev,
clickOutsideToClose: true,
fullscreen: useFullScreen
})
// 可以获取dialog传递回来的值，此处为图片路径
.then(function(result) {
var imgSrc = 'images/' + result;
ue.setContent('<img src="' + imgSrc + '" alt="" style="width:100%">', true);
}, function() {
// 用户点击取消的
});
$scope.$watch(function() {
return $mdMedia('xs') || $mdMedia('sm');
}, function(wantsFullScreen) {
$scope.customFullscreen = (wantsFullScreen === true);
});
};
angular-material
参考官方文档.
主要使用了 datepicker和dialog
图片上传，在线预览裁剪头像ng-img-crop
参考官方文档.
<!-- 页面 -->
<div class="img-pro lflex" ng-show="avaImg">
<div class="flex1">
<div class="image-box-before lflex flex-c ">
<img-crop image="avaImg" area-type="{square}" result-image="myCroppedImage"></img-crop>
</div>
<input type="file" name="" id="avaImg" fileread="avaImg" style="visibility: hidden">
</div>
<div class="flex1">
<h4 class="title">头像预览</h4>
<div class="img-preview">
<img ng-src="{{myCroppedImage}}" />
</div>
<div class="img-preview circle">
<img ng-src="{{myCroppedImage}}" />
</div>
</div>
</div>
<!-- 脚本 -->
// 保存用户上传图标的base64编码 原图
$scope.avaImg = "";
// 处理后的图片
$scope.myCroppedImage = '';
