SIPRP/trunk/SiprpWebFichasClinicas/WebContent/static/html/app/directives/customCombo.js

//select2 documentation: http://ivaynberg.github.io/select2/index.html

evoapp.directive('customCombo', function() {

    //http://www.befundoo.com/university/tutorials/angularjs-directives-tutorial/

    //pass specified values to specified function arguments
    function callback(fn, args) {
        var fnArgs = [].concat(args);
        fnArgs.push.apply(fnArgs, arguments);
        return fn.apply(this, fnArgs);
    };

    return {
        require:'ngModel',
        require: '^ngController',
        restrict: 'AE',
        template:   
        '<select class="form-control populate" data-required="true">' + 
            '<option value="" ng-if="addEmptyOption === \'true\'">Seleccione uma opção...</option>' + 
            '<option ng-repeat="item in options" value="{{item[valueField]}}" ng-selected="getSelected(item[valueField])">{{item[displayField]}}</option>' + 
        '</select>',
        scope: {

            selectedValue: '=',         //  =’ to accept a Object 

            storeModel: '@',            //  @’ to accept a string value
            storeActionsGet: '@',
            valueField: '@',
            displayField: '@',

            addEmptyOption: '@',    
            bindToModel: '@',  

            itemId: '@',  
            
            name: '@',

            //TODO: !!!
            optionsTemplate: '@',  

            onChange: '&'
        },
        controller: function($rootScope, $scope, $filter, globals, $timeout) {

            $scope.elem = null;

            //add reference to this combo, in parent controller
            if($scope.$parent[$scope.itemId] == undefined)
            {
                $scope.$parent[$scope.itemId] = $scope;
            }
            else
            {
                throw Error('Combo ' + $scope.itemId + ' already exists!');
            }

            $scope.store = new globals.dataService.store({
                //model: $scope.storeModel,
                actions: {
                    get: $scope.storeActionsGet
                },
                sort: $scope.displayField
            });

            $scope.options = [];

            $scope.getSelected = function(record){

                return record == $scope.selectedValue ? 'selected' : '';
            };

            $scope.$watch('selectedValue', function(newValue, oldValue){ 

                $scope.selectedValue = newValue;                
            });

            $scope.loadStore = function(){                

                var callBackFn = arguments.length == 1 ? arguments[0] : null;
                callBackFn = angular.isFunction(callBackFn) ? callBackFn : null;

                $scope.store.get(function(response, status, headers, config, items){        
                        
                    $scope.options = $scope.store.items;

                    //$timeout(function () {
                        
                    //    $scope.setValue(null);
                    //    angular.element($scope.domEl).triggerHandler('select');
                    //});

                    if(callBackFn != null)
                    {
                        callback(callBackFn, [response, status, headers, config, items]);
                    }
                });
            };

            $scope.setValue = function(newValue){ 
              
                var option = $scope.domEl.find('option[value=' + newValue + ']');

                if(option.length > 0)
                {
                    var record = angular.element(option[0]).scope();

                    if(record)
                    {
                        $($scope.domEl).val(newValue);   
                        $($scope.domEl).select2(
                          'val', newValue
                        );

                        //TODO: this might throw an exception - recheck it please
                        if($scope.bindToModel === 'true')
                        {
                            $scope.selectedValue = newValue;
                            $scope.selectedRecord = record.item;                          
                        }

                        $scope.onChange({
                            selectedValue: newValue, 
                            selectedRecord: record.item
                        });

                        $scope.domEl.blur();
                    }
                }
                else
                {
                    $($scope.domEl).val(newValue);   
                    $($scope.domEl).select2(
                        'val', newValue
                    );
                }
            };

            $scope.loadData = function(data){

                $scope.store.items = [];
                $scope.options = [];

                $scope.store.loadData(data);

                $scope.options = $scope.store.items;
            };

            $scope.clear = function(){

                $scope.store.items = [];
                $scope.domEl.select2('data', null); 

                $scope.domEl.find('option').remove();
            };
        },
        link: function (scope, elem, attrs, controller) {   

            scope.name = attrs.name == undefined ? scope.valueField : attrs.name;

            scope.elem = elem;

            scope.domEl = $(elem.find('select')[0]);

            scope.domEl.attr('name', scope.name);

            $(scope.domEl).select2({                  
                allowClear: true,
                selectOnBlur: true
            }).on('change', function(e) {

                var record = angular.element($(this).find("option:selected")).scope();

                if(record)
                {
                    var value = $(this).find("option:selected").val();

                    scope.$apply(function () {                         

                        if(scope.bindToModel === 'true')
                        {
                            scope.selectedValue = value;
                            scope.selectedRecord = record.item;                          
                        }

                        scope.onChange({
                            selectedValue: value, 
                            selectedRecord: record.item
                        });

                        elem.blur();
                    });
                }                
            });


        }
    }
});