gistfile1.js

'use strict';

angular.module('MV.ui')
    .directive('mvSelect', function() {
        return {
            template: '<div class="mv-select" >' +
                        '<div mv-dropdown-toggle class="mv-select-toggle-contaner">' +
                            '<button mv-button class="mv-select-selected" ng-class="possibleClasses">{{current_title}}</button>'+
                            '<span class="mv-select-down-arrow"><span class="icon"></span></span>'+
                            '<span class="mv-select-up-arrow"><span class="icon"></span></span>'+
                        '</div>'+
                        '<ul class="mv-select-menu" ng-transclude></ul>'+
                      '</div>',
            transclude: 'true',
            restrict: 'A',
            require:'ngModel',
            scope: {},
            controller: ['$element','$scope','$timeout','$rootScope',function($element,$scope,$timeout,$rootScope){
                $scope.equalVal = function(lval,rval){
                    if (typeof rval !== typeof lval ){
                        rval = parseInt(rval,10);
                        lval = parseInt(lval,10);
                    }
                    return lval === rval;
                };


                $scope.options = [];
                $scope.current_title = '';
                $scope.possibleClasses = {};
                $scope.selectedIndex = null;
                this.addOption = function(optScope){
                    optScope.index = $scope.options.push(optScope)-1;

                    var selected = $scope.equalVal( $scope.data, optScope.title );

                    $scope.possibleClasses[optScope.iconCls] = selected;

                    if (selected){
                        $scope.current_title = optScope.title;
                        $scope.selectedIndex = optScope.index;
                    }

                    optScope.$on('select',function(evt,index){
                        $scope.select(evt,index)
                    });
                };

                $rootScope.$on('$translateChangeEnd',function(){ // придумать как обойтись без этого костыля
                    var index = $scope.selectedIndex;
                    if(index!== null){
                        $timeout(function(){
                            $scope.current_title = $scope.options[index].title;
                        });
                    }
                });


            }],

            link:function($scope, element, attrs, ngModel){
                // Specify how UI should be updated
                ngModel.$render = function() {
                    $scope.data = ngModel.$viewValue;
                    $scope.options.forEach(function(itm,index){
                        if($scope.equalVal(itm.value,$scope.data)){
                            $scope.select('select',index);
                        }
                    })
                };


                $scope.select = function(evt,index){
                    $scope.selectedIndex = index;
                    angular.forEach($scope.options,function(itm,ind){
                        $scope.options[ind].selected = ind === index;
                        $scope.possibleClasses[itm.iconCls] = ind === index;
                    });

                    $scope.current_title = $scope.options[index].title;
                    ngModel.$setViewValue($scope.options[index].value);
                };

            },

            replace: true
        };
    });

angular.module('MV.ui')
    .directive('mvSelectOption', function() {
        return {
            template: '<li class="mv-select-option">' +
                        '<button mv-button ng-class="allClasses" ng-click="$emit(\'select\',index);">{{title}}</button>' +
                      '</li>',
            require:'^mvSelect',
            restrict: 'A',
            scope: {
                'value':'@',
                'selected':'@',
                'title':'@',
                'iconCls':'@'
            },
            controller:['$scope',function($scope){
                $scope.allClasses = {};
                if ($scope.iconCls){
                    $scope.allClasses[$scope.iconCls] = true;
                } else {
                    $scope.allClasses['no-icon'] = true;
                }
            }],
            link: function($scope, element, $attrs, mvSelectCtrl) {
                $scope.selected = $attrs.selected || false;
                mvSelectCtrl.addOption($scope);
            },
            replace: true
        };
    });