javascript - 尝试在元素尚未呈现时访问 ng-repeat 元素

Question

我将使用 WaveSurfer 库来创建播放列表。考虑 ng-repeat 的每个元素都是一个 wavesurfer 元素。这是我正在做的事情：

<div ng-repeat="item in items">
    <div id="wave{{item.id}}" wavsurfer></div>
</div>

这是我用来将每个 div 元素转换为 wavesurfer 元素的 angular 指令：

app.directive('wavsurfer', function () {
return {
    restrict: 'A',
    link: function(scope, element, attrs) {

        // load wav file
        var wavesurfer = WaveSurfer.create({
          container: '#'+attrs.id,
          waveColor: 'red',
          progressColor: 'purple'
        });

        wavesurfer.load(FileUrl);

    }
};});

但是我遇到了错误，因为该元素尚未在 ng-repeat 中呈现：

Error: Container element not found

你能否让我知道这样做的正确方法是什么？

Answer 1

<div ng-if="items.length" ng-repeat="item in items">
    <div id="wave{{item.id}}" wavsurfer></div>
</div>

ng-if 将在收集 items 数组后呈现 ng-repeat div。

Answer 2

您好，请参考以下代码：

似乎问题是在您的 ng-repeat 完成之前；wavesurfer 尝试加载其插件。请参阅以下指令代码：

.directive('wavsurfer', function($timeout) {
  return {
    restrict: 'A',
    scope: {},
    link: function(scope, element, attrs) {

      var wavesurfer
      console.log(attrs.id)
      $timeout(function() {
        wavesurfer = WaveSurfer.create({
          container: '#' + attrs.id,
          waveColor: 'red',
          progressColor: 'purple'
        });
          wavesurfer.load('http://ia902606.us.archive.org/35/items/shortpoetry_047_librivox/song_cjrg_teasdale_64kb.mp3');
      }, 1000)
    }
  };
});

工作小提琴在这里

还在这里添加片段

angular.module("myApp", []).
controller("TreeController", ['$scope', function($scope) {

  $scope.items = [{
    id: 1,
  }, {
    id: 2,
  }, {
    id: 3,
  }, {
    id: 4,
  }];
}]).directive('wavsurfer', function($timeout) {
  return {
    restrict: 'A',
    scope: {},
    link: function(scope, element, attrs) {

      var wavesurfer;
      console.log(attrs.id)
      $timeout(function() {
        wavesurfer = WaveSurfer.create({
          container: '#' + attrs.id,
          waveColor: 'red',
          progressColor: 'purple'
        });
        wavesurfer.load('//ia902606.us.archive.org/35/items/shortpoetry_047_librivox/song_cjrg_teasdale_64kb.mp3');
      }, 1000)

    }
  };
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/wavesurfer.js/1.4.0/wavesurfer.min.js"></script>
<div ng-app="myApp" ng-controller="TreeController">
  <div ng-repeat="item in items">
    <div id="wave{{item.id}}" wavsurfer></div>
  </div>
</div>