Example

Question

基本上，我想要我的范围。$ watch以纪念辩护，但是想要一个单独的观察者，我的观点没有去抖动。我可以使用任何非脏技术吗？

<my-slider></my-slider>

<script type="text/coffeescript">
angular.module('myApp', [])
.directive 'mySlider', ->
  link = (scope) ->
    scope.sliderValue = 0
    scope.$watch 'sliderValue', (value) ->
      console.log 'Slider Value: ' + value

  link: link,
  restrict: 'E',
  template:
    'Value: {{sliderValue}}<br>' +
    '<input type="range" step="1" min="0" max="10" ' +
    'ng-model="sliderValue" ng-model-options="{ debounce: 1000 }" />'

angular.bootstrap document, ['myApp']
</script>

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.js"></script>

Answer 1

我认为你想要的是这样的：

angular.module("myApp", []).directive "mySlider", ($timeout) ->
  link = undefined
  link = (scope) ->
    debouncePromise = undefined
    scope.sliderValue = 0
    scope.$watch "sliderValue", (value, oldVal) ->
      return  unless oldVal
      $timeout.cancel debouncePromise  if debouncePromise
      debouncePromise = $timeout(->

        #your call to the server here!
        console.log value
        return
      , 1000)
      return

    return

  link: link
  restrict: "E"
  template: "Value: {{sliderValue}}<br>" + "<input type=\"range\" step=\"1\" min=\"0\" max=\"10\" " + "ng-model=\"sliderValue\" />"

聪明的方式绕过debounce视图？

1 个答案:

Example