angularjs - Angular Material Design 中 md-slider 的 OnChange 回调

Question

我如何在控制器中知道 Angular Material Design 的 < md-slider > 的值发生了变化？

Answer 1

您可以在指令上添加 ng-change

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

Answer 2

我没有找到如何以正确的方式做到这一点，但你可以通过创建一个指令和一个事件来做到这一点，比如：

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

而且，您必须在<md-slider>. (<md-slider test-drag-end></md-slider>).

我希望它有所帮助。

在 Angular Material 的 git hub 中，您可以执行相同操作的其他事件很少：

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 3

我在绑定到滑块的变量上使用了 $watch：

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

就我而言，我的 HTML 如下所示：

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

祝你好运。

Answer 4

我在里面放了一个回调函数ng-blur，这对我有用。ng-change（起初尝试过，但变得非常慢）。

例子：

<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 5

ng-mouseup应该做的伎俩。如果您想添加逻辑（如我所做的那样）以确保您的值在进行 db 调用更新之前已更改，您可以将其添加到saveChanges()控制器内的函数中。

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