Angular Material Design 中 md-slider 的 OnChange 回调答案

【问题标题】：OnChange callback for md-slider in Angular Material DesignAngular Material Design 中 md-slider 的 OnChange 回调
【发布时间】：2015-02-14 17:31:13
【问题描述】：

如何在控制器中知道 Angular Material Design 中的值发生了变化？

【问题讨论】：

它是一个标准元素，使用ng-model= 来监控它的价值。 material.angularjs.org/#/api/material.components.slider/…

标签： angularjs angular-material

【解决方案1】：

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

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

【讨论】：

在 Angular 1.6.4 和 Angular Material 1.1.4 中工作

【解决方案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);

【讨论】：

这是解决此处描述的问题的好方法：github.com/angular/material/issues/2060 我想用 HTTP 请求响应滑块上的更改，我只希望在拖动结束时发生这种情况，不是每个模型更改一次。监听 '$md.pressup' 事件似乎是解决这个问题的好方法。
你提到的 $md.pressup 事件可能比 $md.dragend 更合适。 $md.dragend 事件似乎只有在滑块实际上被用户吸毒时才会被触发 - 如果他们单击以更改并且不拖动，则不会触发 dragend（但是 $md.pressup 是）。由于 OP 想知道任何时候更改值，$md.dragend 并不总是有效。

【解决方案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>

祝你好运。

【讨论】：

【解决方案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">

【讨论】：

【解决方案5】：

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

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

【讨论】：