Question

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

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

这是我用来将每个div元素转换为waveurfer元素的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)
    }
  };
});

工作小提琴是here

此处还添加了代码段

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>

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

2 个答案: