Question

我正在努力让Theater.JS与Angular应用程序一起使用。

如果要在其中插入动态类型内容的TheaterJS的Div在索引页面上，它可以正常工作。

但是如果我在使用ui-view（或使用ng-view）加载的页面上保留相同的div，则TheaterJs抛出异常

Uncaught TypeError: Cannot set property 'innerHTML' of null

我理解它的发生，因为在通过ui-view加载main.html页面之前加载了TheaterJs。但我不知道如何处理这种情况。

以下是带有示例的plnkr demo。当div在索引页面上时，TheaterJS可以正常工作，但当div在main.html上时，无法工作，而main.html是使用ui-view动态加载的。

在我的项目中，我想在使用ui-view加载的页面上使用TheaterJS。

Answer 1

将脚本include放入<head>并将调用new TheaterJS()移动到指令中，您就可以在部分内容中使用它。

这是一个显示您的工作模板的plunker：

http://plnkr.co/edit/JAbSmNOAZtUMkc976sh8?p=preview

指令：

app.directive("theaterDirective", function() {
  return {
    link: function () {
      var theater = new TheaterJS();
      theater.describe("text", {speed: .7, accuracy: .7}, "#text");
      theater.write("text:It now works in template partials", 600);
      theater.write("text:It is no longer restricted to the Index page", 600);
      theater.write(function () { theater.play(true); }); 

    }
  }
})

HTML partial：

<h1>This is main.html page content</h1>
<h1 theater-directive id="text"><noscript></noscript></h1>

Theater.js无法在装有Angular ui路线的页面上工作

1 个答案: