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

Question

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

因为我没有找到合适的 plugins/directives/whatever 使用纯 angular，我不得不求助于 jQueryUI Slider 和 Spinner 插件。

经过反复试验（以及一些基本的 google-fu），我设法将微调器和滑块绑定到同一范围变量，使用指令并尝试保持 "Angular path"尽可能。

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

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

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

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

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

我的猜测是这个问题引起的：

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

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

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

提前致谢。

Answer 1

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

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

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

Using jQueryUI plugins in AngularJS with a data-bound objects array in a ngRepeat loop

javascript

jquery

jquery-ui

angularjs