在加載到主頁的部分頁面中使用角度

Question

我有一個單頁應用程序。 主索引頁面具有<div>部分，該部分根據用戶操作加載不同的部分頁面。 每個部分頁面具有不同的功能。

例如，這是我的主頁外觀。 很基本的：

 <html> 
 <head>...</head>
 <body>
 ...
 <div id='content-body'>
 ...
 </body>
 </html>

部分頁面通過jQuery加載到content-body <div> ，如下所示：

$('#content-body').load(filename, function (....) ...);

一些部分頁面是簡單的形式，並且在其后面有JavaScript。 同樣，非常基本：

<form id="ABC">
 <div class="row">
   <fieldset class="form-group col-sm-3">
   ...
</form>
<script src="scripts/abc.js" />

問題：對於某些部分頁面（不是全部），我想使用角度頁面。 我創建了類似這樣的東西：

<script src="scripts/angular.js"></script>
<script src="scripts/app.js"></script>
<div ng-app="myApp" ng-controller="myController">
    <p>Angular TEST: {{ 1 + 2 }}</p>
    <form id="DEF">
    ...
    </form>
</div>
<script src="scripts/def.js"></script>

這是行不通的。 據我所知，這是因為angular需要編譯整個頁面，而不能僅在部分頁面上工作。 這個對嗎？ 有什么辦法可以讓我像這樣只在部分頁面上工作嗎？

另外-我無法將角度應用到整個應用程序/主索引頁面。 這不是我的選擇。

Answer 1

我將在下面發布示例，但這是步驟。 您基本上需要手動引導應用程序。 要引導，您需要元素和模塊。 因此，在我的示例中，我從一個空的div開始，其ID為content-here. 當dom加載時，我基本上會插入一個微型angular應用程序，然后手動調用bootstrap函數。 如果可以提前加載腳本，我建議您這樣做。 如果您必須等待加載它們，請告訴我，我將更新小提琴。

<div id='content-here'> </div>

然后，您可以選擇自己設置的角度應用程序。

angular.module('myApp', []);
angular.module('myApp').controller('NixCtrl',NixCtrl);


function NixCtrl($scope){
  $scope.test = "Hello there Angular!"
}

最后一步是設置事件偵聽器或一些代碼塊，以將Angular應用添加到dom，然后調用bootstrap函數：

document.addEventListener("DOMContentLoaded", contentLoaded);

function contentLoaded(){
  var template = ' <div ng-app="myApp"><div ng-controller="NixCtrl">{{test}} </div> </div>';

  $('#content-here').html(template);
   angular.bootstrap($('#content-here'), ['myApp']);
}

http://jsfiddle.net/ncapito/wzdf9k6d/1/

在加載到主頁的部分頁面中使用角度

問題描述

1 個解決方案

解決方案1
2 已采納 2016-02-10 23:35:22

在加載到主頁的部分頁面中使用角度

問題描述

1 個解決方案

解決方案1 2 已采納 2016-02-10 23:35:22

解決方案1
2 已采納 2016-02-10 23:35:22