使用服务器数据初始化 html 选项卡失败

Question

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

这是相关的 html 代码。 ID 为 "tableData" 的选项卡加载数据，ID 为 "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:

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

所以您在 <html ng-app="myApp"> 或 <body ng-app="myApp"> 等根元素中使用 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 选项卡失败

Failed initializing html tab with server data

javascript

angularjs

ng-init