Question

我正在尝试实现（或者说改进）使用angular指令制作的滑块。滑块的结构如下：

DIV
- 带有可拖动滑块的div（左：百分比）
- 带进度条区域的div（宽度：百分比）
DIV
- 带有验证的输入框，显示值（在这种情况下为百分比）

其中一个滑块还调用服务器功能以查看某个日期是否可用，并在输入字段中显示下一个可用日期。屏幕的另一部分动态显示所有这些滑块的所有值。

我希望滑块部分可能会立即更新进度区域，而不仅仅是范围。$ apply。其他依赖关系和验证可以在以后更新。

要获取滑块值，我在鼠标拖动和鼠标单击时听，并将鼠标事件X位置与滑块边界框进行比较，计算百分比并将其设置为应用于模板的范围。

当没有任何东西与范围值相关联时，上面的工作非常快，但是一旦我开始添加观察者，它就变得非常慢。

我已尝试直接设置css，但在应用范围之前不会应用此选项：

link:....
  var sliderDiv = element.find('.slider-handle');
  var progressDiv = element.find('.progress-bar');

updateSlider().....
  sliderDiv.css('left', ''+percent+'%');
  progressDiv.css('width', ''+percent+'%');

这是正确使用的模式吗？

我需要对字段进行验证，有选择地启用或禁用内容，将滑块绑定到可以更改的值。

可以在angular指令中立即应用CSS / DOM操作吗？

我尝试的所有内容仅在范围被“消化”时才会应用。我知道这是一种反模式，但我愿意做出这种权衡。

**至少可以让Angular部分消耗范围吗？ **

我已经尝试仅为滑块设置一个单独的值，并且只将该值应用于范围，但它似乎不起作用，范围似乎只被消耗一次。

        scope.$apply(new function(){
          scope.tempValue = value;
        });

玩$ timeout或_.debounce或_.throttle没有产生任何结果，只会让感知效果更差。

Answer 1

我不确定这是否能解决您遇到的确切问题（可能与此处未提供的代码有关），但在尝试使用Angular实现滑块时，我遇到了类似问题。

为了解决这个问题，我最终编写了自己的代码（ sliderBar.js ），然后按如下方式实现（仅限示例）：

// whatever your controller is
myApp.controller('myController', ['$scope', function($scope) {        
  // wait for the document to be ready
  angular.element(document).ready(function () {
     // define scope variable
     $scope.sliderVal=0;
     // create slider
     $('#elementToMakeSlider').sliderBar({  
       // define change event of slider
       onChange:function(value){
         // apply slider value to scope
         $scope.sliderVal=val;
       }
     });
  });    
}]);

根据您的代码/要求的性质，您可能需要包含onChange函数内容：

     $('#elementToMakeSlider').sliderBar({  
       onChange:function(value){
         $timeout(function() {
           $scope.sliderVal=val;
         });
       }
     });

减少angularjs UI中的延迟

1 个答案: