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[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）

　　定义指令参数配置详解

　　

 

转载于:https://www.cnblogs.com/zhou-pan/p/10063729.html