Theater.js不能在装有Angular ui路由的页面上工作

我正在尝试使Theater.JS适用于Angular应用程序。Theater.js不能在装有Angular ui路由的页面上工作

如果TheaterJS应该在索引页面上动态插入类型化内容的Div，它可以很好地工作。

如果我坚持这是使用用户界面视图（或使用NG-观点为此事）加载页面上的相同div，TheaterJs抛出异常

Uncaught TypeError: Cannot set property 'innerHTML' of null

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

这里是plnkr demo的例子。当div位于索引页面时，TheatreJS工作，但当div位于使用ui-view动态加载的main.html上时无法工作。

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

来源

2015-11-01 Sauchin

通过将脚本包含到<head>中，并将呼叫移动到为一个指令，您可以在您的部分中使用它。

这里是展示你的工作模板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部分：

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

来源

2015-11-01 05:46:39 buzzsaw

非常感谢您的帮助。是的，它与链接功能很好。感谢您的提示帮助:) – Sauchin

Theater.js不能在装有Angular ui路由的页面上工作

回答

相关问题