自定义Angular指令与jQuery实现的Bootstrap风格数据双向绑定的单选&多选下拉框

先说点闲话，熟悉Angular的猿们会喜欢这个插件的。

00.本末倒置

不得不承认我是一个喜欢本末倒置的人，学生时代就喜欢先把晚交的作业先做，留着马上就要交的作业不做，然后慢悠悠做完不重要的作业，卧槽，XX作业马上要交了，赶紧补补补。如今做这个项目，因为没找到合适的多选下拉Web插件，又不想用html自带的丑陋的<select multiple></select>，自己花了一整天时间做了一个。或许这样占用的主要功能开发的时间，开发起来会更有紧迫感吧。感觉自己是个抖M自虐倾向，并且伴有css和代码缩进强迫症的程序猿。

01.画蛇添足

Angular强大的控制器似乎已经可以满足大部分UI上的需求了，但是NodeJS应用往往会使用ejs，jade这样的模板引擎来动态生成html页面，那么问题来了，当我想把后台传给express中res.render()的参数直接显示到界面而且绑定到相应的ng-model怎么办？

解决方法1，不要什么事一次来，Angular的Controller发个post请求再拿数据不就行了

解决方法2，先用模板暂存在html上，再让Controller根据页面上的数据来初始化$scope的值

解决方法3，鄙人对Angular和EJS才疏学浅，谁有好办法教我呗

比如现在要做一个选择下拉框<select>n个<option>xx</option></select>，选项在后台，我不想单独发post拿，也不想放在页面上，Controller单独写逻辑处理，而Angular社区有个ui-select插件，看起来数据是从$scope取的，并不是直接拿的<option />标签的数据，当时我就火了，不就一个下拉框，自己做呗。

10.乐观的程序猿

思路很明确，定义一个Angular directive -> 把选项值拿出来 -> 各种事件加加加 -> scope数据绑定 -> 完结撒花

我估计的时间是半天，然而实际花了多久只能呵呵了，css强迫症，Angular理解不深（所以很多html操作还是在用jQuery），事件考虑不全导致了最终花了超过两倍的时间做完，

不废话了，简单实用，既可以即时绑定ng-model $scope.xxx，也可以直接调jQuery的$("标签的id").val()也能拿到值，

git传送门duang：https://git.oschina.net/code2life/easy-select.git

demo传送门duang~duang：http://ydxxwb.sinaapp.com/easy-select-demo/  (代码不是最新，有两个fix的bug还没有部署上去)

11.放码

1.使用方法： 引入库文件Bootstrap，Angular1.x，引入style.css文件（可以修改css自定义自己想要的样式），easy-select.js，定义Angular的Controller，依赖easySelect模块，像这样 ↓

angular.module('dataDisplay', ['easySelect']).controller('selectController', ['$scope', '$http',function ($scope, $http) {  // your code }]);

然后参考demo示例的规范定义选择框就行啦，是不是很有html原生select标签的亲切感

 

2.源码解释：dom操作和事件都是用jQuery实现的，每一步都有简略的注释，实现双向绑定的关键在于取得标签上定义的ng-model，然后在事件中设置scope[ng-model]的值，

并且调用$digest()循环来让Angular根据ng-model更新DOM，$digest是Angular实现双向绑定的核心之一，原理是将变化的scope值同步到所有需要更新的地方，实现暂时还不大明白，有空单独研究一下这些Angular里面$,$$开头的东西。

 

3.自适应与css，Bootstrap就是自适应的，css可以自己定制不同的风格，style.css都有相关注释

 

easy-select.js

var comDirective = angular.module('easySelect', []);
comDirective.directive("easySelect", function () {
    return {
        link: function (scope, element, attrs) {
            var ngModel = $(element).attr("ng-model");
            if(!ngModel || ngModel.length == 0) {
                ngModel = "defaultSelectModel";
            }
            var status = false; //toggle boolean
            var valueMap = "";
            var options = $(element).children();
            $(element).attr("style", "padding:0");

            //hide original options
            $.each(options, function (opt) {
                $(options[opt]).attr("style", "display:none");
            });

            //build ul
            var html = "<div id='" + attrs.id + "-root' style='width:100%;position: relative;left:-1px'>" +
                "<p id='display-"+attrs.id + "' style='padding:6px 12px "+ ((attrs.multiple != undefined)?"4px":"7px")+
                " 12px;margin:0;border:none;width:95%;margin-left:2px;background-color: transparent'>" +
                "<span style='display: inline-block;padding-bottom: 3px'> </span></p>" +  //this is a dummy span
                "<ul id='" + attrs.id +
                "-container' class='list-group easy-select-container' style='display:none'>"; //options' container

            if(attrs.multiple != undefined) {
                $.each(options, function (opt) {
                    html += "<li value='"+ $(options[opt]).val() +"' class='my-li-container list-group-item option-"+
                    attrs.id+ "'><div style='width:100%;display:inline-block'>" + $(options[opt]).html() +
                    "</div><span value='"+ $(options[opt]).val() +"' class='my-li-option glyphicon glyphicon-ok'></span></li>";
                });
            } else {
                $.each(options, function (opt) {
                    if($(options[opt]).attr("default") != undefined) {
                        scope[ngModel] = $(options[opt]).val();
                        valueMap = $(options[opt]).html();
                        html += "<li value='"+ $(options[opt]).val() +"' class='my-li-container list-group-item option-"+ attrs.id+ "'>"
                        + $(options[opt]).html() + "</li>";
                    } else {
                        html += "<li value='"+ $(options[opt]).val() +"' class='my-li-container list-group-item option-"+ attrs.id+ "'>"
                        + $(options[opt]).html() + "</li>";
                    }
                });
            }

            //if multiple, add button
            if (attrs.multiple != undefined) {
                html += "<li class='list-group-item ' for='ensure-li'><button class='btn btn-default'" +
                " for='ensure-btn' style='padding: 2px' >  确定  </button></li>";
            }

            //render ui
            html += "</ul></div>";
            $(element).append(html);

            $(".my-li-option").each(function(){
                $(this).fadeOut(0);
            });

            if(attrs.multiple == undefined)
                $($("#display-"+attrs.id).children()[0]).html(valueMap);

            //adjust width
            $("#" + attrs.id + "-root").width($("#" + attrs.id + "-root").width() + 2);

            //mouse leave event
            $(element).mouseleave(function(){
                $(".my-li-container").each(function(){
                    $(this).attr("style","");
                });
                if(status) {
                    $("#" + attrs.id + "-container").attr("style", "display:none");
                    status = !status;
                }
            });

            //multiple select seems complex
            if (attrs.multiple != undefined) {
                //click event
                $(element).click(function (e) {
                    //if click on tags, remove it
                    if($(e.target).attr("for") == "option-tag") {
                        // change val and digest change item in angular
                        scope[ngModel] = $(element).val().replace($(e.target).attr("value"),"").replace(/;+/,";").replace(/^;/,"");
                        $(element).val(scope[ngModel]);
                        scope.$digest();
                        $(e.target).remove();
                        $(".my-li-option").each(function(){
                            if($(this).attr("value") == $(e.target).attr("value")) {
                                $(this).css("opacity","0.01");
                            }
                        });
                    } else if($(this).attr("for") != 'ensure-li') {
                        //toggle ul
                        $("#" + attrs.id + "-container").attr("style", status ? "display:none" : "");
                        status = !status;
                    }
                });

                $(".option-"+attrs.id).each(function(){
                    $(this).on('click',function(){
                        var selectValue = $(element).val();
                        var currentValue = $(this).attr("value");
                        var selected = false;
                        //if option is selected ,remove it
                        var temp = selectValue.split(";");
                        $.each(temp,function(obj){
                            if(temp[obj].indexOf(currentValue) != -1) {
                                selected = true;
                            }
                        })
                        if(selected) {
                            $($(this).children()[1]).fadeTo(300,0.01);
                            scope[ngModel] = $(element).val().replace(currentValue,"").replace(/;{2}/,";").replace(/^;/,"");
                            $(element).val(scope[ngModel]);
                            scope.$digest();
                            $("#display-"+attrs.id + " span").each(function(){
                                if($(this).attr("value") == currentValue) {
                                   $(this).remove();
                               }
                            });
                        } else {
                            //add option to val() and ui
                            $($(this).children()[1]).fadeTo(300,1);
                            scope[ngModel] = ($(element).val()+";"+currentValue).replace(/;{2}/,";").replace(/^;/,"");
                            $(element).val(scope[ngModel]);
                            scope.$digest();
                            $("#display-"+attrs.id).append(
                                "<span for='option-tag' value='"+ $(this).attr("value") +"' class='p-option-tag'>"
                                +$(this).children()[0].innerHTML+ "</span>");
                        }
                        status = !status; // prevent bubble
                    });

                    //control background
                    $(this).mouseenter(function(){
                        $(".my-li-container").each(function(){
                            $(this).attr("style","");
                        });
                        $(this).attr("style","background-color:#eee");
                    });
                });
            } else {
				$(".option-"+attrs.id).each(function(){
                    $(this).mouseenter(function(){
                        $(".my-li-container").each(function(){
                            $(this).attr("style","");
                        });
                        $(this).attr("style","background-color:#eee");
                    });
                });
                //single select ,just add value and remove ul
                $(element).click(function () {
                    $("#" + attrs.id + "-container").attr("style", status ? "display:none" : "");
                    status = !status;
                });

                $(".option-"+attrs.id).each(function(){
                    $(this).on('click',function(){
                        scope[ngModel] = $(this).attr("value");
                        $(element).val(scope[ngModel]);
                        scope.$digest();
                        console.log(ngModel);
                        console.log(element.val());
                        $($("#display-"+attrs.id).children()[0]).html($(this).html());
                    });
                });
            }
        }
    }
});

100.如果看到了这里，说明对这个小东西有兴趣，git上一起完善吧，自定义选项模板，选项分组这两个功能还没有实现。少年，加入开源的大军吧。