Angularjs + Spotify Views API (1.0)：DOM 错误异常 8答案

【问题标题】：Angularjs + Spotify Views API (1.0): DOM Error Exception 8Angularjs + Spotify Views API (1.0)：DOM 错误异常 8
【发布时间】：2013-09-05 07:05:00
【问题描述】：

我正在编写一个非常简单的 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 有关。

我很想知道为什么尝试将 List 附加到任意 HTML 元素会失败，即使该 HTML 元素确实存在，以及异常的原因是什么。

【问题讨论】：

标签： angularjs angularjs-directive spotify

【解决方案1】：

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

【讨论】：

Tnx 回复。您将如何在 Angular 指令之外加载模块？我的意思是，如何在指令中引用 List？
我通过将 list 初始化和插入 DOM 包装在 $timeout 中暂时解决了这个问题。无论如何，我想了解它为什么会失败。也许该函数在模板渲染之前被调用？同样，关于您的回答，您是否知道如何验证“它是否实际上加载了超出必要的脚本标签”？
我创建了一些AngularJS directives to be used within Spotify Apps，但我没有遇到 DOMException 问题。确实，由于 AngularJS 不支持异步模块，您需要在每个指令中添加 require 函数。如果您怀疑您的指令可能会为每个标签加载多次，请在控制台中打印一条消息，显示元素的内容，然后再注入 Image 以查看其中的内容。