범위 값을 변경할 때 내 jQuery Slider 각도 명령이 업데이트되지 않습니다

Question

jQuery UI 슬라이더 각도 지시문을 만들었습니다.

HTML 당신으로

<slider min="filters.price.min" max="filters.price.max" range="filters.price.range"></slider> 

컨트롤러

App.controller("MainController", function ($scope, $http) { 
$scope.initFilters = function() { 
    $scope.filters = {}; 
    $scope.filters.price = {}; 
    $scope.filters.price.min = 0; 
    $scope.filters.price.max = 0; 
    $scope.filters.price.range = [0, 0]; 
}; 
$scope.initFilters(); 

$http.get("someurl").success(function (data) { 
    $scope.initFilters(); 
    $scope.filters.price = {}; 
    $scope.filters.price.min = 0; 
    $scope.filters.price.max = 100; 
    $scope.filters.price.range = [$scope.filters.price.min, $scope.filters.price.max]; 
    $scope.$broadcast("applyFilters"); 
}); 
}); 

지침

App.directive('slider', function() { 
return { 
    restrict: 'E', 
    replace: true, 
    transclude: true, 
    template: "<div class='slider'></div>", 
    scope: { 
     min: "=", 
     max: "=", 
     range: "=" 
    }, 
    link: function (scope, element, attrs) { 
     $(element).slider({ 
      range: (scope.range != undefined), 
      min: scope.min, 
      max: scope.max, 
      values: [scope.min, scope.max], 
      slide: function (event, ui) { 
       scope.$apply(function() { 
        scope.range = ui.values; 
       }); 
      } 
     }); 
     scope.$on("applyFilters", function() { 
      console.log("APPLY FILTERS:", scope); 
      console.log("APPLY FILTERS:", scope.min, scope.max, scope.range); 
     }); 
    } 
} 
}); 

: 여기 내 코드입니다 내 코드에서 볼 수 있습니다 내 가격 슬라이더 0으로 초기화됩니다.

나는 webservice에 대한 호출을 만들고 응답을 받으면 가격 슬라이더의 최소, 최대 및 범위 값을 0- 100.

몇 가지 이유 때문에 내 슬라이더가 UI에서 0으로 유지됩니다.

이벤트 핸들러의 콘솔 로그

는 ... 올바른 값을 갖는 범위 객체 아웃

제 콘솔 로그 인쇄 (비록 이상한있다, 즉 최소 = 0, 최대 = 100 범위 = 0 , 100]).

두 번째 콘솔 로그가 잘못된 값 (즉, min = 0, max = 0 및 range = [0, 0])을 인쇄합니다.

왜 이런 일이 일어 났는지 이해할 수있는 사람이 있습니까?

감사합니다,

벤 수소

Answer 1

나는 지침의 범위가 업데이트되기 전에 applyFilters 이벤트 핸들러가 실행됩니다 생각합니다. 이벤트가 발생하기 전에 각도를 지연 또는 강제로 이벤트를 방출하여 범위를 업데이트 할 수 있습니다. 예상대로 plnkr

그러나 이것이 당신의 슬라이더 작업을하지 않습니다 :

이를 참조하십시오. 슬라이더가 이미 생성되었으므로 매개 변수를 수정하려면 option 메서드를 사용해야합니다 ( docs 참조).

나는 min, max 및 range 아래 등에 시계를 추가 할 것 :

scope.$watch("min", function(value) { 
    slider.slider("option", "min", value); 
});  

scope.$watch("max", function(value) { 
    slider.slider("option", "max", value); 
});  

scope.$watch("range", function(value) { 
    slider.slider("option", "range", value); 
}); 

는 전체 코드를 here