AngularJs主窗口和iframe窗口的相同模型

我試圖在點擊主窗口上的某個鏈接時打開一個新的iframe窗口。但是，我想使用相同的模型，即如果數據在主窗口中更改，它應該反映在iframe中，反之亦然。主窗口用戶界面將有幾個字段，而iFrame窗口將包含所有字段。AngularJs主窗口和iframe窗口的相同模型

我對angujar世界很新，是否可行？如果是的話，有什麼建議？

來源

2014-03-12 premsh

不要認爲這實際上是一個AngularJS的具體問題，而是你需要看看如何通過javascript與iFrame進行通信，如果你可以實現這一點，那麼角度部分應該是相對沒有意義的。 – shaunhusain

由於您是AngularJS的新手，您是否考慮過使用['ng-include']（http://docs.angularjs.org/api/ng/directive/ngInclude）指令來替代iframe？它可以爲父頁面保存單獨的html模板和邏輯，但兩者通過角度範圍（父範圍和根範圍）連接 –

爲什麼使用和iFrame？ – Fresheyeball

使用ngInclude指令，angularjs頁面上多個模板的概念是微不足道的。

而ngCompile示例顯示了一個可拖動的div。

將ng-include放置在可拖動元素內應該很容易。您也可以在整個頁面上使用相同的控制器，包括ngInclude，不需要通過service或factory共享數據。

編輯：

我創建了一個簡單的JS Fiddle出一個模板。正如你所看到的輸入字段在主頁面中。然後一個帶有ng-include指令的div加載一個內聯模板（實際上這些模板將是完全獨立的html頁面）。

由於包含的模板沒有單獨的控制器（這是可能的，也是常用的），它在父控制器的範圍內。因此該模板可以訪問name.first和name.last變量。

您將瞭解這些通過的angularjs tutorial

來源

2014-03-12 19:21:43

我不確定ng-include如何幫助跟蹤不同窗口中的變化。例如，第一個窗口具有名爲FirstName的字段，單擊編輯將打開帶有FirstName和LastName的新窗口，如何在第一個窗口中反映此更改？我正在考慮將值存儲到localStorage中，並監聽localStorage的值更改，以便在更改時可以在主窗口或新窗口中更新UI。 – premsh

@premshrestha，看我的編輯和例子 –

不，你不能去。新的iFrame運行在不同的環境中。如果來自不同域的iFrame和父級之間也存在安全限制。

你可以做的是使用html5 postmessage在父母和iframe之間實現一個消息系統。您可以在主窗口中觀察您的範圍變化，通知孩子這些變化並更新孩子的範圍。

來源

2014-03-12 22:29:18

AngularJs主窗口和iframe窗口的相同模型

回答

相關問題