在加载到主页的部分页面中使用角度

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