javascript - 为ng-repeat添加的元素添加js

Question

我是 Angular 新手。

我已经工作了一个星期了。

有人可以告诉我如何做到这一点吗？

<div class="well" ng-repeat="para in parameter">
            <label>{{para}}:</label>
            **<input id="ex{{$index}}"** data-slider-id='ex1Slider' type="text" data-slider-min="0" data-slider-max="100" data-slider-step=1 data-slider-value="0" style="display:inline" />
            <script>
                    **$('#ex{{index}}').slider({
                        formatter: function (value) {
                            return 'Current value: ' + value;
                        }
                    });**
                }
            </script>
        </div>

Answer 1

我建议不要直接在 HTML 中使用 Slider JS 代码。

更好的方法是创建一个指令并将该代码段放入指令链接函数中。

它将确保 DOM 元素可供您使用。

module.directive("addSlider", function() {
  return {
    restrict:"AE",
    link: function() {
      $("input[id^=ex]").slider({
                    formatter: function (value) {
                        return 'Current value: ' + value;
                    }
                });
    }
  }
});

在 HTML 中将其添加为属性

<input id="ex{{$index}}" add-slider data-slider-id='ex1Slider' type="text" data-slider-min="0" data-slider-max="100" data-slider-step=1 data-slider-value="0" style="display:inline" />

我想给出的另一个建议是:

不要将 JS 代码放入迭代器中，而是使用通用 CSS 选择器，例如

$("input[id^=ex]").slider({
                        formatter: function (value) {
                            return 'Current value: ' + value;
                        }
                    });