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

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());     });    });   }  } }});