AngularJs + JqueryUI滑塊初始值

Question

這是我第一篇文章，所以我希望它會全面。

我正在使用AngularJs，並且我已經使用一個角度指令添加了一個JqueryUI滑塊。 我發現了很多關於如何做到這一點的例子，但是沒有一個例子告訴我從範圍中向滑塊添加初始值。

這裏是一個jsfiddle I'created

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]; 
}