javascript - 在 AngularJS 中使用 jQueryUI 插件和 ngRepeat 循环中的数据绑定(bind)对象数组

Question

我正在学习用于特定项目的 AngularJS。在这个项目中，有些产品可以通过编辑参数列表(特定于产品)来定制。我正在尝试使用 ngRepeat 为每个参数呈现一个带有可自定义微调器和 slider 的输入字段。

因为我没有找到合适的插件/指令/任何使用纯 Angular 东西，我不得不求助于 jQueryUI Slider 和 Spinner 插件。

经过一些试验和错误(以及一些基本的 google-fu)后，我设法将微调器和 slider 绑定(bind)到相同的范围变量，使用指令并尝试尽可能多地保持在“Angular 路径”上。

这是工作 fiddle :http://jsfiddle.net/b8gs60fa/4/

然后我尝试使用排列在对象数组中的实际参数数据来实现它，但一切都乱套了。

这是坏掉的 fiddle :http://jsfiddle.net/wh3qv3rs/1/

首先， slider 停止工作。每当我尝试使用 slider 时，控制台都会显示 jQueryUI 错误“closestHandle is undefined”。

此外，现在将使用微调器更新 slider ，但模型本身不会更改。如果在文本框中手动输入值，则模型会正确更新，但 slider 不会。

我的猜测是问题是由这个引起的:

scope.$apply(function() {
    scope[attrs.ngModel] = (parseFloat(ui.value));
});

我认为数据绑定(bind)工作正常(因为在文本框中键入也会更改标签)，但由于 ngRepeat 为每次迭代创建一个新范围，我只是指(和更新)错误目的。遗憾的是，我不知道如何解决这个问题。

至于“closestHandle is undefined”错误，我不知道是什么导致它出现，我暗暗希望，通过解决绑定(bind)问题，这个错误也会自动崩溃。

提前致谢。

Answer 1

转换你的指令，让它们有独立的作用域，那么你在 ng-repeat 中使用它们应该不会遇到任何问题。我在这里更改了您的 slider :

app.directive('slider', function() {
    return {
        scope : {
            ngModel : '='
        },
        restrict: 'A',
        link: function(scope, element, attrs) {
            console.log(scope.ngModel);
            $(element).slider({
                value: scope[attrs.ngModel],
                min: parseInt(attrs.min),
                max: parseInt(attrs.max),
                step: parseFloat(attrs.step),
                slide: function(event, ui) {
                    scope.$apply(function() {
                        scope.ngModel = (parseFloat(ui.value));
                    });
                }
            });
            scope.$watch(function() {return scope.ngModel; }, function() {
                $(element).slider("value", scope.ngModel);
            });
        }
    };
});