Question

我有一个现有网站，它有一个页面，不使用AngularJS

我想要通过AJAX加载的一个页面在AngularJS中构建

怎么做？

这是主页：

<body ng-app="App">
<div>
    <div>
        <div id="bodyPageDiv">
            this is home page

        </div>
    </div>
</div>
<input type="button" onclick="gotopage2();" />
<script>
    function gotopage2() {
        $.ajax({
            url: "/page2",
            success: function (html) {
                $("#bodyPageDiv").html(html);
            }
        });
    }
</script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.js"></script>
<script src="/Scripts/app/appAngular.js"></script>

从Ajax加载的页面：

<div ng-controller="alarmController">
    <table>
            <tr ng-repeat="tag in alarms" t="parent" data-isarchived="{{tag.IsArchived}}" data-red="{{tag.IsActive}}">
                <td class="alignCenter">
                    <img src="{{tag.User.UserImageURI}}" />
                </td>
                <td class="textAlign">
                    <a href="{{tag.linkHref}}" rel="external">{{tag.User.holderName}}</a>
                </td>
                <td class="textAlign">
                    <a href="{{tag.linkHref}}" rel="external">{{tag.AlarmAddress}}</a>
                </td>
                <td class="textAlign">
                    <a href="{{tag.linkHref}}" rel="external">{{tag.User.holderPphone}}</a>
                </td>
                <td class="textAlign">
                    <a href="{{tag.linkHref}}" rel="external">{{tag.User.holderRemarks}}</a>
                </td>
                <td class="textAlign">
                    <a href="{{tag.linkHref}}" rel="external">{{tag.stringAlarmTime}}</a>
                </td>
            </tr>
    </table>
</div>

结果： When this page is loaded in AJAX

使用angularJS将视图添加到没有angularJS的站点

0 个答案: