Richiamata OnChange per md-slider in Angular Material Design

Question

Come posso sapere nel controller che il valore di < md-slider> di Angular Material Design è cambiato?

Answer 1

non ho trovato come farlo in modo corretto, ma lo si può fare con la creazione di una direttiva e un evento, come:

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

E la, si deve aggiungere la direttiva in the <md-slider>. (<md-slider test-drag-end></md-slider>).

Spero che sia d'aiuto.

In hub git di angolare Materiale Ci sono pochi altri eventi in cui è possibile fare lo stesso:

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

ho usato un $ orologio sulla variabile legato al dispositivo di scorrimento:

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

Nel mio caso il mio HTML si presentava così:

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

Good Luck.

Answer 3

ho messo una funzione di callback in ng-blur, che ha lavorato per me. (Provato inizialmente con il ng-change, ma è diventato molto lento).

Esempio:

<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

è possibile aggiungere ng-cambiamento sulla direttiva

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

Answer 5

ng-mouseup dovrebbe fare il trucco. Se vuoi aggiungere la logica (come ho fatto io) per assicurarti che il tuo valore sia cambiato prima di effettuare l'aggiornamento della chiamata db, puoi aggiungerlo all'interno della tua funzione saveChanges() all'interno del tuo controller.

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