Angularjs + Spotify Views API (1.0): DOM Error Exception 8-Collection of common programming errors
I’m writing a very simple AngularJS directive to communicate with Spotify API (1.0). I’ve this custom directive that should create a Spotify List
View (reference here: https://developer.spotify.com/docs/apps/views/1.0/list-list.html).
Here’s the Angular directive:
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()
}
})
})
}
}
})
and this is how I call the directive inside an Angular template:
The problem here is that I randomly get a DOMException Error
:
Uncaught Error: NotFoundError: DOM Exception 8
This’s totally random: sometimes it works and I get back a Spotify List, sometimes it won’t and console doesn’t give me any other debugging info.
I cannot find any way to reproduce the Exception, but I guess it’s something have to do with the targetEl
.
I’d love to know why trying to append the List to an abritrary HTML element fails, even if this HTML element exists for sure, and what is the cause of Exception.
-
I think you may be re-inserting script tags each time you call require; the library does not do any caching of those modules. I believe the DOM exception happens when a script tag times out for some reason (server does not return a 304 or 200). Try loading the modules outside of your angular directive and also can you try and verify if it is actually loading script tags more than necessary?