简单的下拉多选angularjs 实现

因为在工作中需要用到下拉多选的组件，查了一些资料，觉得有些组件挺复杂的，而我只要实现基本的功能，所以结合需求和资料，自己整合了一下，下面是完整的代码实现

(function ( angular ) {
    'use strict';

    angular.module( 'angularMultiSelect', [] ).directive("multiSelect", function($document){
 var template =  "
 
{{selectedName}}
";      
     template += "
";
     template += "
全选
";
     template += "
";
     template += " {{item.name}}
";
     return {
        restrict:"AEC",
        template:template,
        scope:{

            type:"@",
            data:'=',
            itemClicked: '&',

        },
        link:function(scope, element, attrs, controller){
            //$compile(element.contents())(scope);

        },

        controller:function($scope){

            function contains(collection, target) {
                var containsTarget = false;
                collection.some(function(object){
                    if (object === target) {
                        containsTarget = true;
                        return true;
                    }
                    return false;
                });
                return containsTarget;
             }  

        $document.on('click', function(e){


                if ($scope.drop){
                    var  target = e.target.parentElement;
                    var  parentFound = false;

                    while (angular.isDefined(target) && target !== null && !parentFound) {
                        if (!!target.className.split && contains(target.className.split(' '), 'multiSelectContainer') && !parentFound) {

                                parentFound = true;

                        }
                        target = target.parentElement;
                    }

                    if (!parentFound) {
                         $scope.$apply(function(){
                          $scope.drop=false;
                        });

                    }
                }
            });   

            $scope.selectedName="";    
            $scope.selectedName="全选";                                              
            $scope.selecteditems = "";
            $scope.titleShow = true;
            $scope.isAll=true;
            var selecteditem = [];
            var selectedName=[];
            var item={id:"",name:""};
            var map = Array.prototype.map;


         var watch= $scope.$watch('data',function(newValue,oldValue,scope){

               if(newValue){                              
                   selecteditem = map.call(newValue, function(value) { return value.id; });
                   selectedName= map.call(newValue, function(value) { return value.name; }); watch(); } });



            $scope.selectAll=function($event,values){


                     var checkbox = $event.target;
                     var action = (checkbox.checked?'add':'remove');

                     var map = Array.prototype.map


                          if(action == 'add' ){


                               selecteditem = map.call(values, function(value) { return value.id; }); selectedName=map.call(values,function(value){return value.name;}); }else if(action == 'remove' ){ selecteditem = []; selectedName=[]; } ($scope.itemClicked|| angular.noop)({ $item: {id:selecteditem,name:selectedName}, $type: $scope.type, }); $scope.selectedName=selectedName.toString();  } $scope.checkboxClick = function(item,$event){ console.log("innerdrop"+ $scope.drop); $scope.isAll=false; var idx = selecteditem.indexOf(item.id); if($scope.inputType ==="radio"){ selecteditem = []; } if (idx > -1) { selecteditem.splice(idx, 1); selectedName.splice(idx,1); console.log('names'+selectedName); }else { selecteditem.push(item.id); selectedName.push(item.name); } //$scope.selecteditems = selecteditem.join(); if(selecteditem.length>0){ $scope.titleShow = false }else{ $scope.titleShow = true } ($scope.itemClicked|| angular.noop)({ $item:{id:selecteditem,name:selectedName}, $type: $scope.type, }); $scope.selectedName=selectedName.toString();  } $scope.isChecked = function (item){ return selecteditem.indexOf(item) > -1; } $scope.dropDowncontent = true; $scope.toggleAction = function(){ $scope.drop=!$scope.drop; } $scope.hideSelect=function(){ $scope.drop=false; } } } }); })( angular );