angular js中封裝bootstrap-select實現單選、多選並且可模糊搜索

一、用angular封裝bootstrap 

　　directive 在使用隔離 scope 的時候，提供了三種方法同隔離之外的地方交互：

• @ 綁定一個局部 scope 屬性到當前 dom 節點的屬性值。結果總是一個字符串，因為 dom 屬性是字符串。
• & 提供一種方式執行一個表達式在父 scope 的上下文中。如果沒有指定 attr 名稱，則屬性名稱為相同的本地名稱。
• = 通過 directive 的 attr 屬性的值在局部 scope 的屬性和父 scope 屬性名之間建立雙向綁定。

　　以上三種方式都要在directive的attr屬性中進行賦值。上面的話理解起來比較困難，我根據自己的理解做了一下修改：

　　@：只能綁定字符串，所以一些簡單的繼承父scope的屬性使用@
　　=： 需要實現雙向數據綁定的時候使用=
　　&： 提供一種方式執行一個表達式在父scope的上下文中，即使用於將父scope中的函數綁定在指令的scope中

　　$scope.$watch() 監聽$scope中的變量值的變化,如果變化就通知視圖更新數據；為了避免在$watch()中也改變變量的值,因此$watch()至少進行兩次循環($digest()),同時為了避免進入死循環,$digest()最多循環10次。

　　$digest()是內部底層的一個函數,angular中通常通過$scope.$apply()(底層就是$digest())通知視圖進行數據更新。

　require : '?ngModel',  在子元素指令里定義require屬性:require: '?ngModel',表示向外層尋找ngModel(可以使自定義的指令)指令,直到找到為止.注意:向外層尋找,也包括了自己本身,也就是說,自己可以尋找到自己身上的其它指令.

/**
 * 自定義封裝bootstrap-select
 */
angular.module("uee").directive('zpSelect', function($compile) {
    return {
        restrict : 'A',// 指令類型  E：element A：attribute M：comment C: class 可以同時用 ‘AE’
        require : '?ngModel',
        scope:{
            optionDatas:'='
        },
        link : function($scope, $element, $attrs, $ngModel) {//主要是對元素綁定scope數據和進行事件綁定
            $scope.$watch('optionDatas', function() {
                var html = "";
                var optionDatas = $scope.optionDatas;

                if (optionDatas != undefined){
                    var options = optionDatas.data;
                    var name = optionDatas.name;
                    var id = optionDatas.id;
                    for (var i=0;i<options.length;i++){
                        var option = options[i];
                        html += "<option style='font-size: 10px' value="+option[id]+">"+option[name]+"</option>";
                    }
                } else {
                    html = "";
                }
                $($element).html(html);
                $($element).selectpicker('refresh');
                if ($ngModel.$modelValue) {
                    $($element).selectpicker('val', $ngModel.$modelValue);
                }

            });
        }
    };
});

二、html頁面  多選與單選的區別是多了一個  multiple 屬性   

zp-select代表自定義封裝的bootstrap

data-live-search="true"   是否模糊搜索   true支持  false 不支持

/*單選+搜索*/
<label for="userId">發起培訓人</label><br/>
    <select zp-select data-size="5" name="userId" id="userId" ng-model="trainDetail.userId"
     title="請選擇" data-live-search="true" option-datas="optionUserList"
     class="selectpicker show-tick form-control input-sm">
    </select><br/><br/>
/*多選+搜索*/
 <label for="userList">參會人員</label> <br /> <select zp-select
   data-size="5" id="userList" ng-model="trainDetail.countersJoin"
   title="請選擇" data-live-search="true" option-datas="optionUserList"
    multiple class="selectpicker show-tick form-control input-sm">
 </select> <br />

三、js    $scope.optionUserList = {data:$scope.userList,name:"realname",id:"id"};

四、附上參考的博客   bootstrap select API （https://blog.csdn.net/Bern_Liu/article/details/81660631）

　　定義指令參數配置詳解