{"id":1768,"date":"2022-08-30T15:19:17","date_gmt":"2022-08-30T15:19:17","guid":{"rendered":"https:\/\/unknownerror.org\/index.php\/2013\/12\/02\/angularjs-spotify-views-api-1-0-dom-error-exception-8-collection-of-common-programming-errors\/"},"modified":"2022-08-30T15:19:17","modified_gmt":"2022-08-30T15:19:17","slug":"angularjs-spotify-views-api-1-0-dom-error-exception-8-collection-of-common-programming-errors","status":"publish","type":"post","link":"https:\/\/unknownerror.org\/index.php\/2022\/08\/30\/angularjs-spotify-views-api-1-0-dom-error-exception-8-collection-of-common-programming-errors\/","title":{"rendered":"Angularjs + Spotify Views API (1.0): DOM Error Exception 8-Collection of common programming errors"},"content":{"rendered":"<p>I&#8217;m writing a very simple AngularJS directive to communicate with Spotify API (1.0). I&#8217;ve this custom directive that should create a Spotify <code>List<\/code> View (reference here: https:\/\/developer.spotify.com\/docs\/apps\/views\/1.0\/list-list.html).<\/p>\n<p>Here&#8217;s the Angular directive:<\/p>\n<pre><code>angular.module('spotify.view.list', [])\n  .directive('spList', function($rootScope, $timeout) {\n    var rootScope = $rootScope\n    return {\n      restrict: 'EA',\n      replace: true,\n      link: function($scope, el, attrs) {\n        var fn = attrs['for'], list = null, playlist\n        attrs.$observe('uri', function(newval, oldval) {\n          require(['$views\/list#List', '$api\/models'], function(List, models) {   \n            if(newval != oldval &amp;&amp; list == null) {\n              playlist = models.Playlist.fromURI(attrs.uri)\n              list = List.forPlaylist(playlist, {\n                layout: 'default',\n                header: attrs.header||'no',\n                fields: attrs.fields.split(','),\n                height: attrs.height||'fixed',\n                numItems: 10\n              })\n\n              var targetEl = document.getElementById(attrs.node)\n              targetEl.appendChild(list.node)\n              list.init()\n\n            }\n          })\n        })\n\n      }\n    }\n  })\n<\/code><\/pre>\n<p>and this is how I call the directive inside an Angular template:<\/p>\n<pre><code>    \n\n    \n    \n<\/code><\/pre>\n<p>The problem here is that I randomly get a <code>DOMException Error<\/code>:<\/p>\n<pre><code>Uncaught Error: NotFoundError: DOM Exception 8\n<\/code><\/pre>\n<p>This&#8217;s totally random: sometimes it works and I get back a Spotify List, sometimes it won&#8217;t and console doesn&#8217;t give me any other debugging info.<\/p>\n<p>I cannot find any way to reproduce the Exception, but I guess it&#8217;s something have to do with the <code>targetEl<\/code>.<\/p>\n<p>I&#8217;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.<\/p>\n<ol>\n<li>\n<p>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?<\/p>\n<\/li>\n<\/ol>\n<p id=\"rop\"><small>Originally posted 2013-12-02 01:20:42. <\/small><\/p>","protected":false},"excerpt":{"rendered":"<p>I&#8217;m writing a very simple AngularJS directive to communicate with Spotify API (1.0). I&#8217;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&#8217;s the Angular directive: angular.module(&#8216;spotify.view.list&#8217;, []) .directive(&#8216;spList&#8217;, function($rootScope, $timeout) { var rootScope = $rootScope return { restrict: &#8216;EA&#8217;, replace: true, link: function($scope, el, attrs) { var fn = [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-1768","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts\/1768","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/comments?post=1768"}],"version-history":[{"count":0,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts\/1768\/revisions"}],"wp:attachment":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/media?parent=1768"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/categories?post=1768"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/tags?post=1768"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}