Angular Material Design中md-slider的OnChange回调

use*_*401 5 angularjs angular-material

如何在控制器中知道Angular Material Design中<md-slider>的值已更改?

D-G*_*-Go 10

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

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


Gui*_* GM 5

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

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

而且,你必须在中添加指令 <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);
Run Code Online (Sandbox Code Playgroud)

  • 你提到的$ md.pressup事件可能比$ md.dragend更合适.如果滑块实际上是用户的药物,则$ md.dragend事件才会被触发 - 如果他们点击更改,并且不拖动,则永远不会触发dragend(但是,$ md.pressup).由于OP想要随时知道值的变化,因此$ md.dragend并不总是有效. (2认同)