0

我在一个页面上使用angular-slider.js，当滑块的值发生变化时会发出服务器请求。在用户松开鼠标按钮之前，我不希望这种情况发生，换句话说，onmouseup。

这在使用 '=' isloate 作用域并将其传递给作用域变量的指令中很容易做到。

然而，在 angular-slider 中同样的事情并没有像我预期的那样表现。

在 html 中，我添加了属性“mousewatch”，它被分配了 $scope 变量“mouseStatus”

$scope.mouseStatus = 0;

<slider floor="0" ceiling="10" ng-model-low="pMinBedsVal" ng-model-high="pMaxBedsVal" mousewatch="mouseStatus"></slider>

...并将其添加到指令中作为隔离范围：

  sliderDirective = function($timeout) {
    return {
      restrict: 'EA',
      scope: {
        floor: '@',
        ceiling: '@',
        step: '@',
        precision: '@',
        ngModel: '=?',
        ngModelLow: '=?',
        ngModelHigh: '=?',
        translate: '&',
        mousewatch: "="
      },

...最后我将 mousewatch 的值添加到滑块指令中的 onEnd 和 onStart 事件中：

            onEnd = function() {
              pointer.removeClass('active');
              scope.mousewatch = 0;
              console.log("mouseup");
              ngDocument.unbind(events.move);
              return ngDocument.unbind(events.end);
            };

            onStart = function(event) {
              pointer.addClass('active');
              scope.mousewatch = 1;
              console.log("mousedown");
              dimensions();
              event.stopPropagation();
              event.preventDefault();
              ngDocument.bind(events.move, onMove);
              return ngDocument.bind(events.end, onEnd);
            };

问题是指令中为 scope.mousewatch 设置的值没有传递给控制器​​中的 $scope.mouseStatus。

4

1 回答 1

2

所以我想出了一种方法来解决这个问题。我没有使用“=”隔离范围，而是使用“&”，以便可以将值传递给控制器​​中的函数。

mousewatch: '&'

然后，在 onStart 和 onEnd 事件中，我使用 {key:value} 语法将我想要的值传递给 mousewatch()。

            onEnd = function() {
              pointer.removeClass('active');
              scope.mousewatch({status:0});
              ngDocument.unbind(events.move);
              return ngDocument.unbind(events.end);
            };

            onStart = function(event) {
              pointer.addClass('active');
              scope.mousewatch({status:1});
              dimensions();
              event.stopPropagation();
              event.preventDefault();
              ngDocument.bind(events.move, onMove);
              return ngDocument.bind(events.end, onEnd);
            };

调用指令的 html 需要调用函数中的状态变量：

<slider floor="0" ceiling="10" ng-model-low="pMinBedsVal" ng-model-high="pMaxBedsVal" mousewatch="callMouse(status)"></slider>

最后，控制器本身的功能：

$scope.callMouse = function (status){
    console.log("mouseStatus...." + status);
};

而已。现在，一旦松开鼠标按钮，就可以对后端进行调用。

于 2013-10-28T20:17:18.710 回答