landers.angular/src/js/control/directive-dataslider.js

landers.angular

;angular.module('Landers.angular')
    .directive('dataslider', ['Flat', '$compile', 'Helpers', '$timeout', function(Flat, $compile, Helpers, $timeout){
        return {
            restrict : 'E',
            link : function($scope, $ele, $attrs) {
                // var myScope = Helpers.seekScope($scope, $attrs['useScope']);
                var myScope = $scope;

                var configKey = $attrs['config'];
                var ngModel = $attrs['ngModel'];
                var slideStop = $attrs['slideStop'];
                var slideDisabled = $attrs['ngDisabled'];

                var id = $attrs['sliderId'];
                var infoKey = $attrs['info'];

                var html = '';
                html += '<div class="slider-wrapper">';
                html += '   <div data-config="{{ ' + configKey + ' }}" class="data_slider">';
                html += '        <input ng-model="' + ngModel + '" type="hidden"/>';
                html += '   </div>';
                html += '</div>';
                $ele = $($compile(html)(myScope)).replaceAll($ele);

                var destroyWatch;
                var $slider = $ele.find('.data_slider');
                if ( id ) $slider.attr('id', id);

                (function(){
                    var self1 = arguments.callee;

                    //设置监听
                    if (!destroyWatch) {
                        destroyWatch = myScope.$watch(ngModel, function(newValue){
                            if ( newValue !== undefined ) {
                                (function(){
                                    var self2 = arguments.callee;
                                    $slider.find('input').val(newValue);
                                    try {
                                        $slider.slider('option', 'value', newValue)
                                               .trigger('slide', {value:newValue});
                                    } catch (e){
                                        setTimeout(self2, 200);
                                    }
                                })();
                            }
                        });
                        $ele.find('.ui-slider').attachWatcher(destroyWatch);
                    }


                    myScope.$watch(configKey, function(newConfig){
                        if (!newConfig) return;
                        var config = newConfig;
                        // var config = Flat.get(myScope, configKey);

                        //config 有值了，Landers.slider才能正常执行
                        if ( Landers.slider && config ) {

                            config = angular.fromJson(config);
                            Flat.set(myScope, ngModel, config.value);

                            //必须延时，否则虽然config有值，但未反应到html中
                            $timeout(function(){
                                Landers.slider($slider, {
                                    info : infoKey ? '{{' + infoKey + '}}' : '',
                                    slidestop:function (event, ui){
                                        Flat.set(myScope, ngModel, ui.value);
                                        // angular_scope_apply(myScope);

                                        if (slideStop) {
                                            var fun = Flat.get(myScope, slideStop);
                                            if (fun) {
                                                var arr = slideStop.split('.');
                                                arr.length--;
                                                var parent = arr.join('.');
                                                parent = Flat.get(myScope, parent);
                                                fun.call(parent, $slider);
                                            }
                                        }
                                    }
                                });
                                myScope.$watch(slideDisabled, function(newValue){
                                    if ( newValue !== undefined ) {
                                        if ( newValue ) {
                                            $slider.slider( 'disable' );
                                        } else {
                                            $slider.slider( 'enable' );
                                        }
                                    }
                                });
                            }, 200);

                        } else {
                            $timeout(self1, 300);
                        }
                    }, true);
                })();
            }
        };
    }]);