Попытка получить доступ к элементам ng-repeat, пока элементы еще не отрисованы

Question

Я собираюсь использовать библиотеку WaveSurfer для создания списка воспроизведения. Рассмотрим каждый элемент ng-repeat как элемент волнового серфера. Вот что я делаю:

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

Вот угловая директива, которую я использую для преобразования каждого элемента div в элемент waveurfer:

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

Привет Пожалуйста, используйте следующий код:

Кажется, проблема в том, что до того, как ваш ng-repeat завершится waveurfer пытается загрузить свой плагин. См. Следующий код директивы:

.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>

Answer 2

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

ng-if отобразит элементы div ng-repeat после сбора массива items.