select directive

directive：

 webAppDirective.directive("mySelect",function(){
        return {
            restrict: 'AE',
            scope: {
                'list': '&data',
                "changeSelect":"&selectChange",
                "selectModel":"=selectModel"   /* 会自动更新，不需要手动赋值，但要配置 */
            },

            controller: function($scope, $element, $attrs) {
                $scope.list=$scope.list()
                $scope.list.map(function(item,index){
                    if(item[$attrs.value]==$scope.$parent[$attrs.selectModel]){
                        $scope.$parent[$attrs.selectModel]=item
                    }
                    if(item[$attrs.name]){
                        item.name=item[$attrs.name]
                        delete  item[$attrs.name]
                    }
                    if(item[$attrs.value]){
                        item.value=item[$attrs.value]
                        delete item[$attrs.value]
                    }
                })
                $scope.done=function(index){
                    var model=$scope.list[index]
                    $scope.hideSelect=true
                    $scope.$parent[$attrs.selectModel]=angular.copy(model)  //手动更新  不从$apply走，直接修改父级的$scope.$parent[$attrs.selectModel]
                                                                            //不需要再给本地scope.selectModel单独赋值，因为是双向绑定，
                                                                           // 被ng-repeat，对象中有$$hashkey标记,angular.copy格式化
                   $scope.changeSelect()

                }
            },


            template:'<div  class="al_dropDown"><br /> ' +
                '<span ng-mouseover="hideSelect=false" >' +
                '<span style="text-overflow: ellipsis;word-wrap: break-word;white-space: nowrap; padding-left: 0px;overflow: hidden;width: 100px;border: none">{{selectModel.name}}</span> <a></a></span>' +
                ' <ul ng-hide="hideSelect" ><li ng-click="done($index)"  ng-repeat=" i in list " >{{i.name}}</li> </ul> ' +
                '</div>'
        }
    })

HTML：

   <div my-select select-model="mm" select-change="changeSelect(mm.value)"  data='[{ id:1,text:"kitty"},{ id:2,text:"funny"},{ id:3,text:"asdfasdfasdf"}]' name="text" value="id"></div>