angularjs-directive-dy

这是一个angularjs指令库，基于angularjs 1.5+。这个库提供了一些我们常用的组件，例如：

• 更美观更强大的select下拉指令；

• 简单便捷的step指令，只需要简单的几行代码，便可以实现复杂的视觉效果；

• 美观的图片上传uploader指令，可以实现本地预览；

• ...

预览地址：https://rilyzhang.github.io/angularjs-directive-dy

下面内容是详细文档。

目录

1. 指令的引入
2. dy-selector指令
3. dy-step指令
4. dy-tooltip指令
5. dy-uploader指令
6. dy-tree指令

指令的引入

使用npm引入指令：

Example：

npm i -S angularjs-directive-dy

import directiveDy from 'angularjs-directive-dy'
 
var app = angular.module('yourModuleName', [directiveDy]);

或者可以直接去dist文件夹中寻找编译好的js脚本。别忘了引入样式

dy-selector指令

dy-selector指令是一个模拟select下拉框的指令，但是它比select下拉框更加强大和美观。 当你的选项有很多时，它可以进行模糊匹配，让可选项变少。此外，它还支持字符串数组，对象数组。

Example：

<dy-selector ng-model="myData" dy-list="dataList"></dy-selector>

(注：传入的数组元素可以为string类型，也可以为object类型。如果传入object类型，则必须是{ dyKey : xxx, dyVal : xxx }格式）

使用就是这么简单，接下来我们看看属性详解：

ngModel： 这个大家都懂的，不做解释。

dyList： 传入一个数组，可以为string数组，也可以为object类型。

disabled： 只读模式，加上这个属性（无需赋值）后将无法操作下拉框。

zIndex： 当两个dy-selector上下布局的时候会出现层高问题，这个参数的值决定哪个层高优先。

mode： 当存在mode属性，并且值为simple时，可屏蔽匹配搜索框。

placeholder： 尚未选择列表时的提示文字。

objectHandle： 用于映射dyList对象的字段。当你的对象过于复杂时，你无需将对象转换为指定类型， 因为这个属性可以帮你做这些事情！

下面分别演示了传入字符串和传入数组：

Example:

// 传入String类型的数组
$scope.dyList = ['IOS', 'Android', 'windows phone', 'Symbian OS'];

// 传入Object类型的数组
$scope.dyList = [
    {dyKey: '苹果', dyVal: '001'},
    {dyKey: '三星', dyVal: '002'},
    {dyKey: '华为', dyVal: '003'},
    {dyKey: '小米', dyVal: '004'}
];

如果你的对象是这个样子的，你又懒得做转换，那么，你只需要做好字段映射，objectHandle属性可以帮你做这些工作：

Example:

$scope.dyList3 = [
    {brand: '苹果', encoding: '001'},
    {brand: '三星', encoding: '002'},
    {brand: '华为', encoding: '003'},
    {brand: '小米', encoding: '004'},
    {brand: '锤子', encoding: '005'}
];

<dy-selector
   ng-model="myData"
   dy-list="dyList3"
   placeholder="请选择"
   object-handle="{dyKey: 'brand', dyVal: 'encoding'}">
</dy-selector>

dy-step指令

这个指令是为了展示进度的指令，例如我们注册一个账号时，网页上会显示“第一步”、“第二步”、 “第三步”等小箭头。这个指令将其样式封装在内，以便于更简单的操作。

Example：

<script src="angularjs-directive-dy/directive/step/step.js"></script>
<link rel="stylesheet" href="angularjs-directive-dy/directive/step/step.css">
<dy-step step="0" step-list="['第一步','第二步','第三步']"></dy-step>
<script>
    angular.module('app', ['directive.step']);
</script> 

属性详解：

step： 当前所在的步数。

stepList： 步数数组。

特别注意：此指令适用于白色背景的页面。如果页面背景是其它颜色，请在自己的样式文件中重写小箭头的颜色。

dy-tooltip指令

当我们鼠标挪到某个元素上，像提示用户的时候，通常会选中在该元素上加入title属性，但又苦于原生title属性的样式不太美观， 这时候dy-tooltip属性或许可以帮到你。

不多说，直接贴代码：

Example：

<div dy-tooltip data-tip="这里就是你想显示的提示文字">...</div>

dy-uploader 指令

这是一个封装的图片上传组件，ngModel中绑定的为file类型的数组，支持本地图片预览。

Example：

<dy-uploader
    ng-model="$ctrl.files"
    max-length="3"
    max-size="1024 * 1024 * 5"
    file-type="/.(jpe?g|gif|png|bmp)$/i"
    file-type-error="$ctrl.fileTypeError()"
    max-length-error="$ctrl.maxLengthError()"
    max-size-error="$ctrl.maxSizeError()"
    repeat-name-error="$ctrl.repeatNameError()"></dy-uploader>

属性详解：

ngModel： 用于绑定file类型的数组。

maxLength：上传最大数量(default: 20)。

maxSize：限制文件大小,单位为字节(default: 10M)。

fileType：文件类型，值为正则表达式字面量(default: /.(jpe?g|png|bmp|gif)$/i)。

fileTypeError： 当上传文件类型不匹配时调用此方法。

maxSizeError： 当上传文件超过限制大小是调用此方法。

maxLengthError： 当上传文件超过限制数量是调用此方法。

repeatNameError： 当上传重名是调用此方法。

dy-tree 指令

这个指令可以构造一个简单的目录树结构，目前仅支持单选，后续将补充其他功能。

Example：

<dy-tree tree-data="$ctrl.dataList" ng-model="$ctrl.treeVal"></dy-tree>

属性详解：

ngModel：用于绑定获取单选值。

treeData：用于构造树模型的数据。

treeData数据结构

treeData为一个对象数组。目前，这个属性的数据结构比较开放，只有name属性为必要的属性。若其中包含层级结构的子元素， 使用children将子元素包裹即可。children也是一个对象数组。

Example：

$ctrl.dataList = [
            {
                id: 1, name: '新建文件夹1', type: 1, parentId: 0, children: [
                {id: 3, name: '新建文件夹3', type: 1, parentId: 1},
                {
                    id: 4, name: '新建文件夹4', type: 2, parentId: 1, children:
                    [
                        {id: 8, name: '新建文件夹8', type: 2, parentId: 4},
                        {id: 9, name: '新建文件夹9', type: 2, parentId: 4},
                    ]
                }
            ]
            },
            {
                id: 2, name: '新建文件夹2', type: 1, parentId: 0, children:
                [
                    {
                        id: 5,
                        name: '新建文件夹5',
                        type: 2,
                        parentId: 2,
                        children: [{id: 10, name: '新建文件夹10', type: 2, parentId: 5}]
                    },
                    {id: 6, name: '新建文件夹6', type: 2, parentId: 2},
                    {id: 7, name: '新建文件夹7', type: 2, parentId: 2}
                ]
            }
 
        ]

持续更新中ing...

如有疑问，请提Issues。