Angularjs + Spotify Views API (1.0):DOM 错误异常 8

Question

我正在编写一个非常简单的AngularJS指令来与Spotify API（1.0）进行通信。我有这个自定义指令，应该创建一个 Spotify List视图（参考这里：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有关。

我很想知道为什么尝试将列表附加到 abritrary HTML 元素会失败，即使这个 HTML 元素肯定存在，以及异常的原因是什么。

Answer 1

我认为每次调用 require 时，您都可能会重新插入脚本标签;该库不会对这些模块进行任何缓存。我相信当脚本标签由于某种原因超时时会发生 DOM 异常（服务器不返回 304 或 200）。尝试在 angular 指令之外加载模块，您还可以尝试验证它是否确实加载了不必要的脚本标签？