要素がレンダリングされていない間にng-repeat要素にアクセスしようとしています

Question

私は、プレイリストを作成するためにWaveSurferライブラリを使用します。 ng-repeatの各要素がwavesurfer要素であると考えてください。ここで

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

私はwavesurfer要素に各div要素に変換するために使用していた角度指令である：ここで私がやっているものです

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リピートではまだレンダリングされていません。

Error: Container element not found 

あなたは私がこれを行うための正しい方法は何か知らせていただけますか？

Answer 1

こんにちは、次のコードを参照してください：問題はそのあなたのNGリピートが終了する前にあるようだ

を。 wavesurferはそのプラグインを読み込もうとします。 document.querySelector（ '＃' + attrsに：

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

Answer 2

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

ng-ifは、items配列を収集した後にng-repeat divをレンダリングします。