近期工做中使用到的插件總結

表格插件 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

基本

功能強大的富文本編輯器，配置和擴展功能強大 地址.

使用

1.下載
地址.
文檔.

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 = '';