tutorial / directive

angular.module("xn/template/select.html",[]).run(["$templateCache", function($templateCache){
    "use strict";
    $templateCache.put("template/lookup/lookup-match.html",
        " <div class=\"xn-col-md-24\" ><span ng-repeat='data in pro track by $index'>{{item[data]}}<span ng-if=\"item[data] && !$last\">-</span></span></div>"
    );
    //xn-lookup-multiple
    $templateCache.put("xn/template/select/xnLookupMultiple.html",
        "<div  class='xn-lookup-multiple-layout'>" +
        "   <div class='lookup-input-layout'  ng-click='openList($event)'>" +
        "      <ul class='lookup-item clearfix'  ng-class='{\"input-box-focus\":vm.showList}' >" +
        "       <li class='item' ng-repeat=\"item in selectedList track by $index\"><span class='item-text'>{{item[vm.selectedName]}}</span> <span class='delete'   ng-click='deleteItem(item,$index,$event)'></span></li>" +
        "       <li class='item item-input'>" +
        "           <input type='text' class='lookup-input' tabindex='{{tabindex}}'  ng-model='vm.keyword'  ng-required='{{vm.required}}' " +
        "               autocomplete=\"off\"   placeholder=\"{{xnPlaceholder}}\"  " +
        "               ng-keyup=\"onKeyup($event)\" />" +
        "           <span class='lookup-input-mirror'>{{vm.keyword}}</span>"+
        "           </li>" +
        "      </ul> "+
        "   </div>"+
        "   <div ng-if='vm.showList'  class='lookup-list-layout' ng-class='{\"lookup-list-layout-right\":vm.isRight}' style='{{vm.showWidth}}'>"+
        "      <div class='lookup-list' ng-show='!vm.isLoading && itemList.length>0'>"+
        "          <ul class='list-item'>"+
        "               <li class='item clearfix' ng-repeat=\"item in itemList track by $index\" ng-click='selectItem(item,$event)' " +
        "                   ng-class='{\"item-active\":vm.index==$index,\"item-selected\":item.lookSelected}'  ng-init='isShow=false'>" +
        "                   <div class='item-html clearfix' ng-mouseover='doMouseover($index);isShow=true'  ng-mouseout='isShow=false;'>" +
        "                       <div lookup-match index=\"$index\" data-item=\"item\" data-pro='vm.val'  template-url=\"templateUrl\"></div>"+
        "                   </div>" +
        "                   <div class='selected' ng-if='item.lookSelected'></div>" +
        "                   <div class='item-tooltip clearfix' ng-if='vm.index==$index &&isShow && vm.isPopup'>" +
        "                       <div class='item-tooltip-layout'>" +
        "                         <div lookup-match index=\"$index\" data-item=\"item\" data-pro='vm.val'  template-url=\"templateUrl\"></div>"+
        "                       </div>" +
        "                   </div>" +
        "               </li> "+
        "          </ul>"+
        "          <div class='page'  ng-show='vm.totalCount>vm.pageSize'>" +
        "               <div class='pre ' ng-class='{\"pre-disabled\":2>vm.pageNumber}' ng-click='doPage(\"pre\",$event)'></div>" +
        "               <div class='next' ng-class='{\"next-disabled\":vm.maxPageSize==vm.pageNumber}' ng-click='doPage(\"next\",$event)'></div>" +
        "           </div>"+
        "      </div>" +
        "       <div ng-show='vm.isLoading' class='lookup-tip'>正在搜索中...</div>"+
        "       <div ng-show='vm.isError' class='lookup-tip' ng-bind='vm.error'></div>"+
        "       <div ng-show='!vm.isError&&itemList.length==0 && !vm.isLoading' class='lookup-tip'>没有搜索到相关内容</div>"+
        "       <div ng-if=\"vm.link\" class='lookup-a' ng-click='doLink()'>{{vm.linkTip}}</div>"+
        "  </div>"+
        "</div>"
    );
}]);
angular.module("xn.directive.select",["xn/template/select.html"])
    .filter("xnSearch", [
        function () {
            return function (arr, key) {
                if(!key) {
                    return arr;
                } else {
                    var list = [];
                    for(var i=0; i<arr.length; i++) {
                        if(arr[i].name.indexOf(key)>=0)
                            list.push(arr[i]);
                    }
                    return list;
                }
            };
        }
    ])
    .directive("xnLookupMultiple",["$timeout","$q","$document",function($timeout,$q,$document) {
        return {
            restrict :"EA",
            scope: {
                selectedList : "=ngModel",
                showKey:"@",
                searchKey:"@",
                searchVal:"@",
                required : "@",
                name : "@",
                isPopup:"=",
                showWidth : "@",
                pageSize : "@",
                selectCallback:"&",
                deleteCallback:"&",
                method:"&"
            },
            templateUrl: "xn/template/select/xnLookupMultiple.html",
            replace: true,
            require: "^ngModel",
            link:function (scope, elements, attrs) {
                scope.templateUrl = attrs.templateUrl;
                scope.itemList=[];
                scope.selectedList=scope.selectedList||[];

                scope.vm={
                    isError:false,
                    error:"",
                    isLoading:false,     //是否在查询
                    showList:false,     //显示选择框
                    maxPageSize:0,          //最大页数
                    key:scope.searchKey||"id",           //关键词
                    selectedName:scope.showKey||"name",           //关键词
                    required:scope.required||false,        //输入框是否必填
                    isRight:false,                          //是否右对齐
                    isPopup:scope.isPopup||false,
                    keyword:"",
                    pageSize:Number(scope.pageSize)|| 10,
                    pageNumber:1,
                    showWidth:scope.showWidth?"width:"+scope.showWidth+"px":"width:100%",
                };
                $timeout(function () {
                    elements.find(".lookup-input").attr("name",scope.name )
                },0);

                if(scope.searchVal){
                    scope.vm.val=scope.searchVal.split("|");       //搜索关键词
                }else {
                    scope.vm.val=["name"];
                }

                scope.xnPlaceholder="";

                /**
                 * 设置获取焦距
                 */
                function setFocus(){
                    $timeout(function() {
                        elements.find(".lookup-input").focus();
                    }, 0);
                }
                //失去焦点
                function doBlur() {
                    $timeout(function() {
                        elements.find(".lookup-input").blur();
                    }, 0);
                    init();
                }

                function initKeyword () {
                    scope.vm.keyword="";
                    elements.find('.lookup-input').width(20);
                };


                var interval = 0;
                var hasSearch = true;

                setInterval(function () {
                    interval += 10;
                    if(interval >= 350 && !hasSearch) {
                        getList();
                    }
                }, 10);

                //获取列表数据
                function getList(pageNumber) {
                    if(pageNumber!==false){
                        scope.vm.pageNumber=1
                    }
                    hasSearch = true;
                    var deferred  = $q.defer();

                    var data={
                        pageSize: scope.vm.pageSize,
                        pageNumber:scope.vm.pageNumber,
                        keyword:scope.vm.keyword
                    };
                    scope.vm.isLoading=true;
                    scope.method({data:{"deferred":deferred,data:data}});

                    deferred.promise.then(function (data) {

                        scope.vm.isLoading=false;

                        if(data.tip){
                            scope.vm.isError=true;
                            scope.vm.error=angular.copy(data.tip);
                            scope.itemList=[];
                            scope.vm.maxPageSize=Math.ceil(0/scope.vm.pageSize);

                        }else {
                            init();
                            //列表负值
                            scope.itemList=data.itemList ||[];
                            scope.vm.totalCount=data.totalCount;
                            /*判断是否被选中*/
                            angular.forEach(scope.selectedList,function (select) {
                                angular.forEach(scope.itemList,function (item) {
                                    if(select[scope.vm.key]===item[scope.vm.key]){
                                        item.lookSelected=true;
                                    }
                                });
                            });
                            //判断第几个
                            scope.vm.index=0;
                            scope.vm.maxPageSize=Math.ceil(data.totalCount/scope.vm.pageSize);
                        }
                    });
                }



                //初始化pageNumber
                function initPage(){
                    scope.vm.pageNumber=1;
                }


                // 按键事件

                scope.onKeyup=function (e) {
                    var inputW=elements.find('.lookup-input-mirror').width();
                    elements.find('.lookup-input').width(inputW+20);
                   /* scope.vm.showList=true;*/
                    switch (e.keyCode){
                        case 13:   //回车
                            var data=scope.itemList[scope.vm.index];
                            scope.selectItem(data);
                            break;
                        case 33:  //上一页
                            if(scope.vm.pageNumber>1){
                                scope.vm.pageNumber--;
                                getList();
                            }
                            break;
                        case 34:  //下一页39
                            e.preventDefault();
                            e.stopPropagation();
                            if(scope.vm.pageNumber<scope.vm.maxPageSize){
                                scope.vm.pageNumber++;
                                getList();
                            }
                            break;
                        case 40: //向下
                            e.preventDefault();
                            e.stopPropagation();
                            if(scope.itemList.length-1>scope.vm.index){
                                scope.vm.index++;
                            }
                            break;
                        case 38://向上
                            e.preventDefault();
                            e.stopPropagation();
                            if(scope.vm.index>0){
                                scope.vm.index--;
                            }
                            break;
                        case 39:  //右边
                            break;
                        case 37:  //向左
                            break;
                        case 27:  //退出  esc
                        case 9:  //退出  teb
                            scope.vm.showList=false;
                            doBlur();
                            initKeyword();
                            break;
                        case 8://backspace
                            interval = 0;
                            hasSearch = false;
                            initPage();
                            break;
                        case 46://删除
                            interval = 0;
                            hasSearch = false;
                            initKeyword();
                            initPage();
                            break;
                        default:
                            interval = 0;
                            hasSearch = false;
                            initPage();
                            break;
                    }
                };

                scope.doMouseover=function (index) {
                    scope.vm.index=index;
                };
                //下一页
                scope.doPage=function (page) {
                    if(page=="pre"){
                        //上一页
                        if(scope.vm.pageNumber>1){
                            scope.vm.pageNumber--;
                        }else {
                            setFocus();
                            return;
                        }
                    }else if(page=="next"){
                        //下一页
                        if(scope.vm.pageNumber<scope.vm.maxPageSize){
                            scope.vm.pageNumber++;
                        }else {
                            setFocus();
                            return;
                        }
                    }
                    //读取数据
                    getList(false);
                    setFocus();
                };

                //选择时调用外部方法
                function selectCallback(data){
                    if(scope.selectCallback){
                        scope.selectCallback({data:data});
                    }
                }
                //删除调用外部方法
                function deleteCallback(data){
                    if(scope.deleteCallback){
                        scope.deleteCallback({data:data});
                    }
                }
                scope.openList=function (e) {
                    scope.vm.isError=false;
                    scope.vm.showList=true;
                    setFocus();
                    init();
                    getList();
                };

                //选择
                scope.selectItem=function (data,e) {
                    if(e){
                        e.preventDefault();
                        e.stopPropagation();
                        setFocus();
                    }
                    var isHave=false;
                    angular.forEach(scope.selectedList,function (item) {
                        if(item[scope.vm.key]==data[scope.vm.key]){
                            isHave=true;
                        }
                    });
                    if(!isHave){
                        scope.selectedList.push(angular.copy(data));
                        data.lookSelected=true;
                        initKeyword();
                        selectCallback(data);
                    }
                };

                //删除
                scope.deleteItem=function (data,index,e) {
                    e.preventDefault();
                    e.stopPropagation();
                    setFocus();
                    angular.forEach(scope.itemList,function (item) {
                        if(item[scope.vm.key]==data[scope.vm.key]){
                            item.lookSelected=false;
                        }
                    });
                    scope.selectedList.splice(index,1);
                    deleteCallback(data);
                };


                var documentClickBind = function(event) {
                    if (scope.vm.showList && event.target !== elements) {
                        scope.$apply(function() {
                            scope.vm.showList = false;
                            doBlur();
                            initKeyword();
                        });
                    }
                };
                scope.$watch("vm.showList", function(value) {
                    if (value) {
                        $document.bind('click', documentClickBind);
                    } else {
                        $document.unbind('click', documentClickBind);
                    }
                });

                elements.bind('click', function(event) {
                    event.preventDefault();
                    event.stopPropagation();
                });

                //对齐方式
                $timeout(function () {
                    if(scope.showWidth && elements.offset() && $(document).width()-elements.offset().left<Number(scope.showWidth)+100){
                        scope.vm.isRight=true;
                    }
                },0);

                /*初始化数据*/
                function init(){
                    scope.vm.isError=false;
                    scope.vm.error="";
                };


            }
        }
    }])
    .directive('lookupMatch', ['$templateRequest', '$compile', '$parse', function ( $templateRequest, $compile, $parse) {
        return {
            restrict:'EA',
            scope:{
                item:"=",
                pro:"="
            },
            link:function (scope, element, attrs) {
                var tplUrl = $parse(attrs.templateUrl)(scope.$parent) || 'template/lookup/lookup-match.html';

                $templateRequest(tplUrl).then(function(tplContent){
                    var tplEl = angular.element(tplContent.trim());
                    element.replaceWith(tplEl);
                    $compile(tplEl)(scope);
                });

            }
        };
    }]);