Warum wird meine jQuery Slider Angular Directive nicht aktualisiert, wenn ich den Scope-Wert ändere

Question

Ich habe eine jQuery UI Slider Angular Directive erstellt. Hier ist mein Code:

HTML

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

-Controller

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"); 
}); 
}); 

Richtlinie

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

Wie Sie kann aus meinem Code zu sehen, ist mein Preis Schieberegler auf 0 initialisiert.

Ich mache dann einen HTTP-Aufruf an einen Webservice und nach Erhalt einer Antwort, versuche ich die Min-, Max-und Bereich Werte des Preis-Slider auf 0- 100.

Aus irgendeinem Grund bleibt mein Schieberegler auf der Benutzeroberfläche auf 0.

Die Konsolenprotokolle in den Event-Handler sind allerdings seltsamsten ...

Das erste Konsolenprotokoll druckt den Umfang Objekt, das die richtigen Werte hat (dh min = 0, max = 100 und Bereich = [0 , 100]).

Das zweite Konsolenprotokoll gibt die falschen Werte aus (d. H. Min = 0, max = 0 und Bereich = [0, 0]).

Bitte könnte mir jemand helfen zu verstehen, warum das passiert.

Danke,

Ben Bullock

Answer 1

Ich denke, Ihre applyFilters Event-Handler ausgeführt wird, bevor Rahmen aktualisiert der Richtlinie. Sie können Ereignisse mit Verzögerung oder Kraftwinkel ausgeben, um den Bereich zu aktualisieren, bevor das Ereignis ausgelöst wird.

sehen: plnkr

dies jedoch nicht Ihre Schieberegler funktioniert wie erwartet. Der Schieberegler wurde bereits erstellt. Um seine Parameter zu ändern, müssen Sie die Methode option verwenden, siehe docs.

würde ich Uhr auf min, max und range wie unten hinzufügen:

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

Gesamten Code here