先說點閑話，熟悉Angular的猿們會喜歡這個插件的。
00.本末倒置
不得不承認我是一個喜歡本末倒置的人，學生時代就喜歡先把晚交的作業先做，留著馬上就要交的作業不做，然后慢悠悠做完不重要的作業，臥槽，XX作業馬上要交了，趕緊補補補。如今做這個項目，因為沒找到合適的多選下拉Web插件，又不想用html自帶的丑陋的<select multiple></select>，自己花了一整天時間做了一個?；蛟S這樣占用的主要功能開發的時間，開發起來會更有緊迫感吧。感覺自己是個抖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上一起完善吧，自定義選項模板，選項分組這兩個功能還沒有實現。少年，加入開源的大軍吧。
以上所述是小編給大家分享的自定義Angular指令與jQuery實現的Bootstrap風格數據雙向綁定的單選與多選下拉框，希望大家喜歡。
新聞熱點
疑難解答
