减少 angularjs UI 中的延迟

Question

我正在尝试实现（或更确切地说是改进）使用角度指令制作的滑块。 滑块的结构如下：

• div
  • 带有可拖动滑块的div（左：百分比）
  • 带有进度条区域的div（宽度：百分比）
• div
  • 带有验证的输入框显示值（在本例中为百分比）

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

我希望滑块部分和进度区域能够立即更新，而不仅仅是在 scope.$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+'%');

这是使用正确的模式吗？

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

CSS/DOM 操作能否立即应用在 Angular 指令中？

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

** 至少可以让 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;
         });
       }
     });