Question

我有一个非常简单的形式，使用angularjs验证数字字段test.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并向页面发出请求并使用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。提前谢谢！

Answer 1

如果您正在从头开始构建角度应用，那么您应该这样做考虑将ng-app放在主索引中并使用ng-include作为 @Ronnie指出。
但是，如果你被迫在传统的一个地方集成角度代码，你可以手动bootstrap角度app，之后，填充使用angular.boostrap ajax回调中的div #test：

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();

使用Ajax将外部angularjs元素放在html页面中

1 个答案: