在頁面中動態加載AngularJS模板

我有一個包含2個控制器的頁面：一個管理所謂'apps'列表，另一個將新的Angular模板放入其Div元素的innerHTML中。在頁面中動態加載AngularJS模板

<div ng-controller="appList"></div> 
<div ng-controller="appPane"> Dynamic content should be loaded here! </div>

我已經使用標準{{表達式}}綁定嘗試過，但它們不與HTML工作，我也嘗試了NG-綁定HTML的不安全指令（綁定innerHTML來，該應用程序的請求的返回），但是控制器不在這個新代碼中執行。

問題似乎是，通過使用綁定，Angular不重新解析有問題的html的內容，將其用作角度應用程序。任何想法如何讓它解析動態內容？

來源

2012-07-03 Zoey

「應用程序」是否有不同的Angular應用程序（每個應用程序都有'ng-app'聲明？）或僅僅是同一個應用程序的不同控制器/視圖？如果只有不同的控制器/視圖，我會使用appList作爲導航並設置'$ routeProviders'（http://docs.angularjs.org/api/ng.$routeProvider）來管理不同的視圖。 –

可能是比我嘗試的更好的解決方案，但我對Angular仍然陌生，所以我會試試看。謝謝。 – Zoey

看看在uiRouter模塊（從AngularUI項目）。它增加了狀態的概念，這些狀態非常類似於路由，但是還有其他好處，比如嵌套它們的能力。例如：

$stateProvider 
    .state('myState', { 
     url: '/mystate', 
     templateUrl: '...', 
     controller: 'MyCtrl' 
    }) 
    .state('myState.substate', { 
     url: '/{substate}', 
     templateUrl: '...', 
     controller: 'MySubCtrl' 
    });

MySubCtrl，只要你去/mystate/something，你可以使用「東西」作爲一個參數（見$stateParams）將被激活。您可以將狀態嵌套到任意數量的級別。

來源

2014-02-04 00:49:03

這聽起來很有用！因爲我的回答來自Angular的早期開發，所以這個問題不存在 - 其他人可以自由發表評論，如果不是這樣的話，但我覺得現在是正確的答案。公認。 – Zoey

我很高興這些事情（AngularJS生態系統）正在演變。 –

爲了記錄，我已經在我自己的項目中嘗試了這個解決方案，它非常有用。有幾個問題，例如導航到不存在的路線導致錯誤，但我相信隱藏在他們的中等深度文檔中是一種檢測路線何時不存在以便可以處理的手段。作爲一般情況，我向任何嘗試使用路由的人推薦此解決方案，並且我建議從Angular跳過官方的Route提供程序，因爲這個提供程序非常強大。 – Zoey

看來，$ compile服務，當您想要重新編譯的元素與您當前的範圍一起提供時，我們正在尋找。從我的源

例子：

var appPane = $('#AppPane');//JQuery request for the app pane element. 
appPane.html(data);//The dynamically loaded data 
$compile(appPane.contents())($scope);//Tells Angular to recompile the contents of the app pane.

這應該幫助任何人遇到我的問題，我希望。

來源

2012-07-03 20:43:20 Zoey

看看$routes和ngView中的angularjs。

這裏是一個非常簡單的例子：

http://jsfiddle.net/pXpja/3/

來源

2012-07-21 14:11:42 bearfriend

這是'官方'選擇，但目前並不適用於需要控制器分層結構的情況，正如我原來的問題。 – Zoey

在頁面中動態加載AngularJS模板

回答

相關問題