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路由的頁面上工作

回答

相關問題