Question

我有一个单页应用。主索引页面有<div>部分，根据用户操作加载不同的部分页面。每个部分页面都有不同的功能。

例如，以下是我的主页面的样子。很基本的：

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

部分页面通过jQuery加载到内容体<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>

这不起作用。从我所知道的，这是因为角度需要编译整个页面而不能只在部分页面上工作。它是否正确？有没有一种方法可以像这样在局部页面中使用角度？

另外 - 我无法将角度应用于整个app / main索引页面。这对我来说不是一个选择。

Answer 1

我将在下面发布一个示例，但这里是步骤。您需要基本上手动bootstrap该应用。要引导，您需要元素和模块。所以在我的例子中，我从id为content-here.的空div开始。当dom加载时，我基本上插入一个迷你角应用程序然后手动调用bootstrap函数。如果您可以提前加载脚本，我建议您这样做。如果您必须等待加载它们，请告诉我，我会更新小提琴。

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

然后您可以设置您选择的角度应用程序。

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


function NixCtrl($scope){
  $scope.test = "Hello there 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 个答案: