OnChange Callback für md-Slider im Angular Material Design

Question

Wie kann ich im Controller wissen, dass sich der Wert < md-slider> von Angular Material Design geändert hat?

Answer 1

konnte nicht gefunden werden, wie es in der richtigen Weise zu tun, aber Sie können es durch eine Richtlinie und das Erstellen eines Ereignisses, wie zB:

.directive('testDragEnd', function() { 
    return { 
     restrict: 'A', 
     link: function(scope, element, attrs) { 
      element.on('$md.dragend', function() { 
       console.info('Drag Ended'); 
      }) 
     } 
    } 
}) 

Und die haben Sie die Richtlinie hinzufügen in die <md-slider>. (<md-slider test-drag-end></md-slider>).

ich hoffe es hilft.

In scharfkantigem Material git Nabe gibt es nur wenige andere Veranstaltungen, bei denen Sie das gleiche tun:

https://github.com/angular/material/blob/952ee3489e84226c73f83db15f8586db93cdca19/src/components/slider/slider.js

element 
     .on('keydown', keydownListener) 
     .on('$md.pressdown', onPressDown) 
     .on('$md.pressup', onPressUp) 
     .on('$md.dragstart', onDragStart) 
     .on('$md.drag', onDrag) 
     .on('$md.dragend', onDragEnd); 

Answer 2

ich verwendet, um eine $ Uhr auf die Variable an dem Schieber gebunden:

$scope.$watch(
    function() { 
     return $scope.tex; 
    }, 
    function(newValue, oldValue) { 
     $mdToast.show($mdToast.simple().content("Slider=" + newValue).position("top right").hideDelay(1500)); 
    }); 

In meinem Fall wie dies mein HTML sah:

<md-slider min="0" max="50" ng-model="tex" md-discrete></md-slider> 

Good Luck.

Answer 3

ich eine Callback-Funktion in ng-blur setzen, die für mich gearbeitet. (Zuerst versucht ng-change, aber das wurde sehr langsam).

Beispiel:

<md-slider ng-model="gigabyte" ng-blur="myCallbackFunction()" id="myslider"> </md-slider> 
<input flex type="number" ng-model="gigabyte" ng-blur="myCallbackFunction()" aria-controls="myslider"> 

Answer 4

Sie können ng-Änderung über die Richtlinie

<md-slider min="0" max="50" ng-model="text" ng-change="myMethod()" md-discrete></md-slider> 

Answer 5

ng-mouseup sollte es tun hinzuzufügen. Wenn Sie Logik (wie ich) hinzufügen möchten, um sicherzustellen, dass Ihr Wert geändert wurde, bevor Sie Ihren DB-Aufruf aktualisieren, können Sie das innerhalb Ihrer saveChanges() Funktion in Ihrem Controller hinzufügen.

<md-slider ng-mouseup="vm.saveChanges(vm.myModel)"></md-slider>