个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-12-03 07:45:28 24 4
gpt4 key购买 nike

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

这里是相关的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>

这是我的相关性Ctrl。 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();
});

这是我的 Controller ，它确实被调用:

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>

最佳答案

在 html 中声明 data-ng-controller="fooCtrl"但你没有 Controller 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两个选项卡显示来自两个不同 Controller 的数据。

关于javascript - 使用服务器数据初始化 html 选项卡失败，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35226446/

24 4 0
文章推荐： javascript - 将音频文件/blob 从 UI 发送到 Servlet 以保存在服务器上。
文章推荐： javascript - 嵌入 SVG 时出现未定义错误
文章推荐： javascript - Angular JS 加载问题
文章推荐： javascript - 制作 JS 对象的副本以更改给定键的出现
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com