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.

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

Originally posted 2013-12-02 01:20:42.