Question

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

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

然而，角度滑块中的相同内容并不像我期望的那样。

在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的值添加到了slider指令中的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。

Answer 1

所以我找到了一种方法来解决这个问题。我没有使用'='隔离范围，而是使用'＆amp;'这样我就可以将值传递给控制器中的函数。

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);
};

就是这样。现在可以在释放鼠标按钮后调用后端。

隔离范围值未传递给控制器

1 个答案: