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

Question

I have a single page app. 我有一个单页应用程序。 The main index page has <div> section that loads different partial pages depending on user actions. 主索引页面具有<div>部分，该部分根据用户操作加载不同的部分页面。 Each partial page has different functionality. 每个部分页面具有不同的功能。

For example, here is how my main page looks like. 例如，这是我的主页外观。 Pretty basic: 很基本的：

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

The partial pages get loaded into the content-body <div> via jQuery like so: 部分页面通过jQuery加载到content-body <div> ，如下所示：

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

Some partial pages are simple forms and have javascript behind it. 一些部分页面是简单的形式，并且在其后面有JavaScript。 Again, pretty basic: 同样，非常基本：

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

Problem: For some partial pages (not all), I'd like to use angular. 问题：对于某些部分页面（不是全部），我想使用角度页面。 I've created something like so: 我创建了类似这样的东西：

<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>

This does not work. 这是行不通的。 From what I can tell, it is because angular needs to compile the whole page and wont work on just a partial page. 据我所知，这是因为angular需要编译整个页面，而不能仅在部分页面上工作。 Is this correct? 这个对吗？ Is there a way I can get angular to work in a partial page only like this? 有什么办法可以让我像这样只在部分页面上工作吗？

Also - I cannot apply angular to the whole app / main index page. 另外-我无法将角度应用到整个应用程序/主索引页面。 It is not an option for me. 这不是我的选择。

Answer 1

I will post a sample below but here are the steps. 我将在下面发布示例，但这是步骤。 You need to basically manually bootstrap the app. 您基本上需要手动引导应用程序。 To bootstrap you need the element, and the module. 要引导，您需要元素和模块。 So in my example I start with an empty div with an id of content-here. 因此，在我的示例中，我从一个空的div开始，其ID为content-here. When the dom loads I basically insert a mini angular app and then manually call the bootstrap function. 当dom加载时，我基本上会插入一个微型angular应用程序，然后手动调用bootstrap函数。 If you can in advance load the scripts i recommend you do it. 如果可以提前加载脚本，我建议您这样做。 If you have to wait to load them let me know and I'll update the fiddle. 如果您必须等待加载它们，请告诉我，我将更新小提琴。

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

Then you would setup your angular app however you chose. 然后，您可以选择自己设置的角度应用程序。

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


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

The last step is to setup an event listener or some block of code to add the angular app to the dom, and then call the bootstrap function: 最后一步是设置事件侦听器或一些代码块，以将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/ 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