Spotify API (1.0) と通信するための非常に単純な AngularJS ディレクティブを作成しています。SpotifyList
ビューを作成する必要があるこのカスタム ディレクティブがあります (ここを参照: https://developer.spotify.com/docs/apps/views/1.0/list-list.html )。
Angular ディレクティブは次のとおりです。
angular.module('spotify.view.list', [])
.directive('spList', function($rootScope, $timeout) {
var rootScope = $rootScope
return {
restrict: 'EA',
replace: true,
link: function($scope, el, attrs) {
var fn = attrs['for'], list = null, playlist
attrs.$observe('uri', function(newval, oldval) {
require(['$views/list#List', '$api/models'], function(List, models) {
if(newval != oldval && list == null) {
playlist = models.Playlist.fromURI(attrs.uri)
list = List.forPlaylist(playlist, {
layout: 'default',
header: attrs.header||'no',
fields: attrs.fields.split(','),
height: attrs.height||'fixed',
numItems: 10
})
var targetEl = document.getElementById(attrs.node)
targetEl.appendChild(list.node)
list.init()
}
})
})
}
}
})
これは、Angular テンプレート内でディレクティブを呼び出す方法です。
<div class="playlist-tracklist" id="sp-playlist"></div>
<sp-list
for="playlist"
fields="track,artist"
header="yes"
type="tracks"
layout="default"
uri="{{playlist.playlist_uri}}"
node="sp-playlist">
</sp-list>
ここでの問題は、私がランダムに取得することDOMException Error
です:
Uncaught Error: NotFoundError: DOM Exception 8
これは完全にランダムです。機能する場合もあれば、Spotify リストが返される場合もありますが、機能しない場合もあり、コンソールは他のデバッグ情報を提供しません。
例外を再現する方法が見つかりませんが、targetEl
.
この HTML 要素が確かに存在する場合でも、List を abritrary HTML 要素に追加しようとすると失敗する理由と、Exception の原因を知りたいです。