javascript - 在 Angular 模板中使用 Angular 应用程序

Question

我有一个页面，其功能类似于 MVC.NET 中的布局。它包含一个 Angular 应用程序，该应用程序使用 templateUrl 加载名为“AngularJSON.html”的 HTML 页面。 AngularJSON.html 包含一个 Angular 应用程序，该应用程序执行 $http.get() 并用结果填充表格。

如果我自行将“AngularJSON.html”加载到浏览器中，它会执行 GET 并正确填充表。如果我将布局页面加载到浏览器中，AngularJSON.html 的静态元素会正确显示，但使用 ng-repeat 的表格根本不显示。

如何让模板页面在布局中正确显示？

ReportableStocksLayout.html - 布局页面。

    <script>
        var mainApp = angular.module("mainApp", ['ngRoute']);
        mainApp.config(['$routeProvider', function ($routeProvider) {
            $routeProvider.

            when('/viewStocks', {
                templateUrl: 'AngularJSON.html',
                controller: 'viewStocksController'
            }).

            otherwise({
                redirectTo: '/viewStocks'
            });
        }]);

        mainApp.controller('viewStocksController', function ($scope) {
            $scope.message = "Add Cows";
        });

    </script>

templateURL 页面“AngularJSON.html”包含一个 Angular 应用程序，该应用程序执行 $http.get 并使用结果填充表格。

AngularJSON.html -JavaScript

<script>
    var app2 = angular.module('myApp2', []);

    app2.controller('StocksController', function ($scope, $http) {
        // When the page loads...
        // Load myData with REST GET
        $http.get("http://stocquer.com/stocQuerWebAPI/api/Ticker/").then(function (response) {
            $scope.myData = response.data;
        });
    });

</script>

AngularJSON.html -HTML

<div ng-app="myApp2" ng-controller="StocksController">
    <table class="table">
        <tr>
            <th>
                Symbol
            </th>
            <th></th>
        </tr>

        <tr ng-repeat="x in myData">
            <td>
                {{ x.Ticker }}
            </td>
            <td>
                <a href="#" ng-click='EditTicker(x.Ticker)'>Edit</a> |
                <a href="#" ng-click='DetailsTicker(x.Ticker)'>Details</a> |
                <a href="#" ng-click='DeleteTicker(x.Ticker)'>Delete</a>
            </td>
        </tr>

    </table>

    <hr />
</div>

也许我遇到了引导问题。由于我的 Angular 应用程序位于两个单独的 HTML 文件中，因此我希望避免出现此问题。

Answer 1

AngularJS 应用程序不能相互嵌套。

所以使用路由没有多大意义(？)，因为你必须进行嵌套，而这是行不通的。

但是，如果你没有嵌套 AngularJS ng-app 那么你必须这样做:要在一个 HTML 文档中运行多个应用程序，您必须使用 angular.bootstrap() 手动引导它们 Link to documentation .

所以我想你会这样做:

<div id="myApp2" ng-app="myApp2" ng-controller="StocksController">
    <table class="table">
        <tr>
            <th>
                Symbol
            </th>
            <th></th>
        </tr>

        <tr ng-repeat="x in myData">
            <td>
                {{ x.Ticker }}
            </td>
            <td>
                <a href="#" ng-click='EditTicker(x.Ticker)'>Edit</a> |
                <a href="#" ng-click='DetailsTicker(x.Ticker)'>Details</a> |
                <a href="#" ng-click='DeleteTicker(x.Ticker)'>Delete</a>
            </td>
        </tr>
    </table>
    <hr />
</div>

然后在JS中

angular.bootstrap(document.getElementById("myApp2"), ['myApp2']);