Angular Material 设计中 md-slider 的 OnChange 回调

Question

我如何在控制器中知道 Angular Material 设计中的 < md-slider > 值已更改？

Answer 1

我在绑定到滑块的变量上使用了 $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 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 中心，您可以在其他一些活动中执行相同的操作：

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

我在 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 4

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

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

Answer 5

ng-mouseup 应该可以解决问题。如果你想添加逻辑（就像我所做的那样）以确保你的值在你的数据库调用更新之前已经改变，你可以在你的控制器中的 saveChanges() 函数中添加它。

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

Angular Material 设计中 md-slider 的 OnChange 回调

OnChange callback for md-slider in Angular Material Design

angularjs

angular-material