Question

这是我在这里的第一篇文章，所以我希望它是全面的。

我正在使用AngularJs，并且我使用angular指令添加了一个JqueryUI滑块。我已经找到了很多关于如何做到这一点的例子，但是他们都没有告诉我如何将范围内的初始值添加到滑块。

var testApp= angular.module('testApp',['ngResource']);

testApp.factory('remoteRequest', function($resource) {
var remoteRequest = $resource('/echo/json/');
return remoteRequest;
});

testApp.directive('sliderDays', function() {
return {
    link: function(scope, elem,attrs) {
        $(elem).slider({
            range: true,
            min: scope.days[1],
            max: scope.days[scope.days.length-1],
            values: [scope.days[0], scope.days[1]],
            slide: function( event, ui ) {
                console.log(ui.values[ 0 ] +" "+ ui.values[ 1 ]                 );
            }
        });
    }
}
});

function TestCtrl($scope, $resource, remoteRequest)
{
$scope.prova=1;
$scope.days=[];
var ret= remoteRequest.get(function(){
     $scope.days=[1,2,3,4,5,10,25];
});
}

非常感谢任何形式的帮助，谢谢！

Answer 1

这是你的代码中的一个工作小提琴，我在我改变的地方添加了评论。您遇到的一个主要问题是，在有任何数据之前，您试图从scope.days访问数组元素。

<强>小提琴

http://jsfiddle.net/ntaUJ/24/

查看

<div ng-app="testApp"> <div ng-controller="TestCtrl"> <p><span>{{days[0]}}</span> - <span>{{days[days.length-1]}}</span></p> <div slider-days days="days"></div> </div> </div>

<强>代码

var testApp= angular.module('testApp',['ngResource']); testApp.directive('sliderDays', function() { return { link: function(scope, elem,attrs) { $(elem).slider({ range: true, min: scope.days[1], max: scope.days[scope.days.length-1], values: [scope.days[0], scope.days[scope.days.length-1]], slide: function( event, ui ) { console.log(ui.values[0], ui.values[1]); } }); } } }); function TestCtrl($scope) { $scope.days=[1,2,3,4,5,10,25]; }

AngularJs + JqueryUI滑块初始值

1 个答案: