使用Ajax把外部angularjs元素在HTML页面

我有使用验证数字字段的test.html angularjs一个非常简单的形式...使用Ajax把外部angularjs元素在HTML页面

http://plnkr.co/edit/mfxdTxGUXLZswzl1nyF2?p=preview

<div ng-app="myApp"> 
<script> 
angular.module('myApp', []) 
.controller('myController', ['$scope', function($scope) { }]); 
</script> 

<form name="myForm" ng-controller="myController"> 
    <input name="numberField" ng-model="myModel" type="number" value="" /> 
    <p ng-show="myForm.numberField.$error.number">Not valid number!</p> 
</form> 
</div> 
</html>

我希望把这种形式为不同的html页面...

<html> 
<div id="test"> 
<!--I want my angular js number element to go here--> 
</div> 
</html>

通常当我做这样的事我使用JavaScript，并作出reques吨至页面，并使用innerHTML到地方，我想它，像这样的形式...

<script> 
var xRequest1; 
    xRequest1=new XMLHttpRequest(); 
    xRequest1.onreadystatechange=function() 
    { 
     if((xRequest1.readyState==4) && (xRequest1.status==200)) 
     { 
      document.getElementById("test").innerHTML=xRequest1.responseText; 
     } 
    } 
    xRequest1.open("post","test.html",true); 
    xRequest1.send(); 
</script>

但是这是行不通的，任何想法，我怎么能做到这一点？或者这甚至有可能？我以前从未使用过angularjs。提前致谢！

来源

2015-09-14 jeeves2007

你可以使用NG-包括哪些内容？ – Ronnie

如果你是从头开始构建的角度应用程序，然后，你应该考虑，将在主索引ng-app并采用NG-包括作为 @Ronnie指出。
但是，如果你被迫整合的角度，在一个地方遗留代码，您可以使用angular.boostrap手动引导角的应用程序，之后，尽显 DIV＃测试在Ajax回调：

Here is a working demo using your exemple.

var xRequest1; 
    xRequest1=new XMLHttpRequest(); 
    xRequest1.onreadystatechange=function() 
    { 
     if((xRequest1.readyState==4) && (xRequest1.status==200)) 
     { 
      document.getElementById("test").innerHTML=xRequest1.responseText; 
      // bootstrap your app here ... 
      angular.bootstrap(document.getElementById('test'), ['myApp']); 
     } 
    } 
    xRequest1.open("get","test.html",true); 
    xRequest1.send();

来源

2015-09-15 00:58:46

非常感谢！我一直试图让这项工作太长时间。出于好奇，为什么我需要在我的主页面中有angular.module（'myApp'...脚本？因为所有这些都在我的页面中，所以调用我的测试div来填充它。世界，但我不能让它工作，除非我在主页面。 – jeeves2007

使用Ajax把外部angularjs元素在HTML页面

回答

相关问题