Question

我正在创建一个包含两个标签的html页面。当您单击选项卡1时，它会加载表数据1.当您单击选项卡2时，它加载表数据2.选项卡1按预期工作。但是，当我单击选项卡2时，不会加载数据。控制器是相同的。有什么区别？

这是相关的html代码。 id为“tableData”的标签加载数据，标签为“correlations”的标签不加载。

        <div>
            <ul class="nav nav-tabs" role="tablist">
                <li role="presentation"><a href="#tableData" aria-controls="tableData" role="tab" data-toggle="tab">Table Data</a></li>
                <li role="presentation"><a href="#correlations" aria-controls="correlations" role="tab" data-toggle="tab">Correlations</a></li>
            </ul>

            <!-- Tab panes -->
            <div class="tab-content">
                <div role="tabpanel" class="tab-pane active" id="tableData">
                    <h2 class="sub-header">Health Data</h2>
                    <div class="table-responsive" data-ng-app="myApp" data-ng-controller="journalCtrl">
                        <div data-ng-include="'screens/tablescreen.html'"></div>
                    </div>
                </div>
                <div role="tabpanel" class="tab-pane" id="correlations">
                    <h2 class="sub-header">Correlations Data</h2>
                    <div class="table-responsive" data-ng-app="correlationsApp" data-ng-controller="correlationsCtrl">
                        <div data-ng-include="'screens/tablescreen.html'"></div>
                    </div>
                </div>
            </div>
        </div>

这是我的correlationsCtrl。永远不会调用init（）。为什么：

var correlationsApp = angular.module('correlationsApp', []);

correlationsApp.controller('correlationsCtrl', function ($scope, $http) {
    $scope.init = function () {
        $http.get("https://localhost:4567/foo/1/correlations")
            .then(function (response) {
            var json = response.data.records;
            $scope.records = json;
            $scope.headers = response.data.headers;
        });
    };

    //This is not invoked.  Why?
    $scope.init();
});

这是我的控制器，它被调用：

var app = angular.module('myApp', []);
app.controller('journalCtrl', function ($scope, $http) {

    $scope.init = function () {
        $http.get("https://localhost:4567/journal/1")
            .then(function (response) {
            var json = response.data.records;
            $scope.records = json;
            $scope.headers = response.data.headers;
        });
    };

    //This is invoked on page load.  Why does this work and the other doesn't?
    $scope.init();
});

这是html表：

<table class="table table-striped">
    <thead>
    <tr>
        <th data-ng-repeat="header in headers">{{header}}</th>
    </tr>
    </thead>
    <tbody>
    <tr data-ng-repeat="record in records track by $index">
        <td data-ng-repeat="header in headers">{{ record.data[header] }}</td>
    </tr>
    </tbody>
</table>

Answer 1

在html中，您声明data-ng-controller="fooCtrl"，但您没有控制器fooCtrl。无需为两个选项卡声明两个不同的module，您可以为同一模块中的两个选项卡声明两个controller。

像：

var app = angular.module('myApp',[]);

app.controller('correlationsCtrl', function ($scope, $http) {
    $scope.init = function () {
        // your code
    };
    $scope.init();
}).controller('journalCtrl', function ($scope, $http) {

    $scope.init = function () {
       // your code
    };
    $scope.init();
});

因此您可以在ng-app = "myApp"或<html ng-app="myApp">等根元素中使用<body ng-app="myApp">，并在标签页中仅使用data-ng-controller。

<div class="table-responsive" data-ng-controller="journalCtrl">
    <div data-ng-include="'screens/tablescreen.html'"></div>
 </div>

和

<div class="table-responsive" data-ng-controller="correlationsCtrl">
        <div data-ng-include="'screens/tablescreen.html'"></div>
</div>

See PLUNKER DEMO两个标签显示来自两个不同控制器的数据。

无法使用服务器数据初始化html选项卡

1 个答案: