Angular 指令一次只作用于一个元素

Question

我有以下 angular 指令。它使用范围滑块滚动水平 div 项。如果仅应用于一行，它会起作用。但如果应用于多个...什么都不会发生。嵌入有效，但函数永远不会运行，也不会给出任何错误。我该怎么做才能使它更 angular 通用并处理多个元素？这是重现：CodePen

app.directive('bob', function () {
        return {
            restrict: 'A',
            transclude: true,
            template:
            `<div style="background-color: #333"><input type="range" value="0" id="scroll-rangeb"><div id="photo-containerb" style="display: flex; overflow-x: scroll; flex-direction: row; align-items: center; height: 90%;" ng-transclude></div></div>`,
            link: function (scope, element, attrs) {
                var scroll = document.getElementById("scroll-rangeb");
                scroll.oninput = function () {
                    var panel = document.getElementById("photo-containerb");
                    var total = panel.scrollWidth - panel.offsetWidth;
                    var percentage = total * (this.value / 100);
                    panel.scrollLeft = percentage;
                }
            }
        };
    });

Answer 1

#scroll-rangeb 是一个独特的元素（理论上），如果您在每个指令上覆盖 oninput 它显然不会起作用，它只会保留第一个找到的元素。无论如何，您绝对不能使用具有相同 ID 的多个组件。尝试从 link 函数给出的元素参数中找到它，而不是使用类或其他东西。

例如，我可以通过使用 element[0].getElementsByClassName('scroll-rangeb') 来解决它：

angular.module('app', [])
  .directive('bob', function() {
    return {
      restrict: 'A',
      transclude: true,
      template: `
          <div style="background-color: #333">
            <input type="range" value="0" class="scroll-rangeb">
            <div
              class="photo-containerb"
              style="display: flex; overflow-x: scroll; flex-direction: row; align-items: center; height: 90%;"
              ng-transclude>
            </div>
          </div>`,
      link: function(scope, $element, attrs) {
        var
          element = $element[0],
          scroll = element.getElementsByClassName("scroll-rangeb")[0],
          panel = element.getElementsByClassName("photo-containerb")[0];

        scroll.oninput = function() {
          var total = panel.scrollWidth - panel.offsetWidth;
          var percentage = total * (this.value / 100);

          panel.scrollLeft = percentage;
        }
      }
    };
  });

img {
  border-radius: 50%;
}

.box {
  display: block;
  width: 50px;
  height: 50px;
  min-width: 50px;
  margin: 10px;
}

<div ng-app="app">
  <div bob>
    <img class="box" ng-repeat="img in [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18]" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==">
  </div>
  <div bob>
    <img class="box" ng-repeat="img in [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18]" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==">
  </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular.js"></script>

Angular 指令一次只作用于一个元素

Angular Directive only works on one element at a time

javascript

angularjs

angular-directive