基于ionic的自定义指令----选择框

前提：学习视频连接http://www.imooc.com/video/3085
功能：

• 自定义选择框弹出样式
• 支持单选按钮和多选按钮的形式
• data:输入的数据
• result：返回结果
• type：[“checkbox”,”radio”]
  代码如下：

html:
<div class="item" >
    <span class="input-label">风格:{{search.style}}</span>
    <k-select data="{{chest.styleList}}" type="checkbox" result ="search.style"></k-select>
</div>

css:
/**弹出窗popup 可y向滚动 无titlecss*/
.team-popup .popup-head{
    display: none;
}
.team-popup .popup{
    padding: 0;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius:5px;
}
.team-popup .popup-body{
    padding: 0;
    overflow-y:scroll;
}
/*自定义kmdSelect*/
.kmd-select {
    position: relative;
    height: 28px;
    width: 100%;
    border: 1px solid #bdbdbd;
    background-color: #f8f8f8;
    font-size: 14px;
    line-height: 26px;
    padding-left: 6px;
}
.kmd-select img{
    position: absolute;
    height: 16px;
    top: 6px;
    right: 5px;
    width: 8px;
}
.kmd-checkbox{
    border: 0;
    padding-left: 20px;
}
.kmd-checkbox input{
    height: 22px;
    width: 22px;
    float: left;
}
.kmd-checkbox div{
    float: left;
    height: 22px;
    padding-left: 16px;
    font-size: 17px;
    line-height: 22px;
}
.kmd-but{
    padding:0 !important;
}
.kmd-but button{
    padding: 0;
    width: 50%;
    background-color:white;
    color:black;
}
.kmd-but button + button{
    color:#4b9efa;
}

js:
.directive('kSelect',function($ionicPopup,$rootScope){
    var template = {
        checkbox:
        '<div class="item kmd-checkbox" ng-repeat="item in tempList">' +
            '<input type="checkbox" ng-checked="isChecked(item)" ng-click="updateSelection($event,item)">' +
            '<div>{{item.name}}</div>' +
        '</div>' +
        '<div class="item kmd-but">' +
            '<button class=\'button\' ng-click=\'cancel()\' >取消</button>' +
            '<button class=\'button\' ng-click=\'submit()\' >确认</button>' +
        '</div>',
        radio:
            '<div class="item kmd-checkbox" ng-repeat="item in tempList">' +
                '<input type="radio" ng-checked="isChecked(item)" ng-click="updateSelection($event,item)">' +
                '<div>{{item.name}}</div>' +
            '</div>' +
            '<div class="item kmd-but">' +
                '<button class=\'button\' ng-click=\'cancel()\' >取消</button>' +
                '<button class=\'button\' ng-click=\'submit()\' >确认</button>' +
            '</div>'
    } ;
    return {
        restrict:'AE',
        replace:true,
        scope:{
            test:'&',
            result:'='
        },
        template:'<div class="kmd-select"  ng-click="show()" >' +
        '{{showData}}' +
        '<img ng-src="./img/home/unfold.png">' +
        '</div>',
        link:function(scope,element,attr){
            scope.showData ='--选择--';
            var data = JSON.parse(attr.data);
            var temp =  template[attr.type];
            scope.show = function(){
                scope.tempList = data;
                scope.myPopupDetail = $ionicPopup.show({
                    cssClass: 'team-popup',
                    template: temp,
                    scope: scope
                });
            };
            //取消
            scope.cancel = function(){
                scope.myPopupDetail.close();
            };
            //确认
            scope.submit = function(){
                var d = scope.selected.join(',');
                scope.showData = d;
                scope.result = d;
                scope.myPopupDetail.close();
            };
            //数据处理
            scope.selected = [] ;
            scope.isChecked = function(item){
                return scope.selected.indexOf(item.name) >= 0 ;
            } ;
            scope.updateSelection = function($event,item){
                var checkbox = $event.target ;
                var checked = checkbox.checked ;
                if(checked){
                    scope.selected.push(item.name) ;
                }else{
                    var idx = scope.selected.indexOf(item.name) ;
                    scope.selected.splice(idx,1) ;
                }
            };


        }
    }
})

遇到的坑：

• label标签中，不支持ng-click事件

页面展示：