新页面上未显示数据

Data not showing on new page

本文关键字：数据 显示 新页面      更新时间：2023-09-26

我创建了一个web服务，它有两个方法，常规方法和详细方法。"常规"显示基本数据，而"详细信息"提供所选对象的进一步详细信息。我发现在加载显示详细信息的新页面时遇到困难。

这些是我创建的角度方法。

var app = angular.module("myModule", .....);
var app = angular.module("myModule2", [])
                    .controller("myController2", function ($scope, $http) {
                        $scope.test = "DetailsScript";
                        //method to get booking by reference start
                        $scope.getReference = function (Reference) {
                            $http({
                                method: 'GET',
                                url: 'http://localhost:3466/MyWebService.asmx/DashboardDetail',
                                params: {
                                    Reference: Reference
                                }
                            }).then(function (response) {
                                $scope.booking = response.data
                            });
                        };
                        //method to get booking by reference end
                        //method to load page start
                        $scope.loadView = function (ref) {
                            var url = 'DetailsPage.html';
                            $scope.getReference(ref);
                            window.location(url);
                        };
                        //method to load page end
                    });
angular.module("CombineModule", ["myModule", "myModule2"]);

当我点击以下按钮时，我似乎无法获得进入新页面的详细信息：

<input id="refBox" type="text" ng-model="Reference" ng-change="getReference(Reference)" />
            <br />
            <input type="button" ng-click="loadView(Reference)" />

ng-click只是在没有加载新数据的情况下将我带到新页面。

我的web服务被正确调用并返回正确的Context.Response.Write(javascriptserializer.Serialize(myObject));

可能有两个问题：页面是在数据返回之前加载和显示的，因为它是异步的，如果是这种情况，为什么？当loadView调用具有.then函数的getReference时？

附言：我刚接触angularjs。

角度不是这样工作的。angular背后的一般概念是你的

  1. 加载页面（应用程序）
  2. 加载该页面上应显示的所有数据
  3. 在视图上显示数据

因此，您的方法的问题是，您正在加载数据，然后离开应用程序（通过转到DetailsPage.html）。您不会这样做。

如果你想显示详细信息页面，你应该看看ngRoute。

好的，您提供的示例存在一些问题。

首先，在中将两个不同的模块分配给同一个var

var app = angular.module("myModule", ...

和

var app = angular.module("myModule2",...

在给定的例子中，这似乎并不重要，但可能是一个问题。

其次，在视图逻辑中定义应用程序逻辑。尽管angular不能强制您使用MVC模式，但请注意，控制器应该是视图（HTML）和应用程序逻辑（服务）之间的"桥梁"。因此，您应该在服务中实现"getReference"方法。

正如Angular指南中所写的，服务是单一的，具有应用程序生命周期，而控制器具有视图生命周期，它们应该处理应用程序逻辑和/或与服务器的通信。换句话说，当应用程序存在时，服务存在，当加载视图时，控制器将可用。

同样，这不是关键，只要这只是一个测试，并且绝对不应该投入生产。保持也是一种痛苦

请注意，当我说"应用程序逻辑"时，它是可以转到客户端的逻辑。你的产品逻辑应该由服务器强制执行，但有时你想在客户端中复制它，这就是你使用服务的地方

第三，正如许多人告诉你的那样，你应该检查ngRoute模块。这是一个本机模块，如果我正确理解你的问题，它将解决你的问题并做loadView应该做的事情。

你会得到这样的东西：

var someModule = angular.module('someModule', ['ngRoute']);
someModule.config(["$routeProvider", function($routeProvider){
  $routeProvider
    .when('/', {
        templateUrl: '/path/to/index.html',
    })
    .when('/some/route/:id/', {
        templateUrl: "/path/to/some/route.html",
        controller: "SomeController"
    })
    .when('/some/route/:id/details/', {
        templateUrl: "/path/to/some/route.html",
        controller: "SomeDetailsController"
    })
    .when('/another/route/', {
        templateUrl: "/path/to/another/route.html",
        controller: "AnotherController"
    });
}]);
someModule.controller('SomeController', ['$scope', '$routeParams', function($scope, $routeParams){
  //Using routeParams, you can get information from the route
  //For instance, if you want the get details from a book with id "abc123"
  //Then when the route '/some/route/abc123/' is accessed, 'abc123' will be available
  //through $routeParams
  $scope.id = $routeParams.id;
  //$scope.id = 'abc123'
}]);
someModule.controller('SomeDetailsController', ['$scope', function($scope){
  //do stuff
}]);
someModule.controller('AnotherController', ['$scope', function($scope){
  //do stuff
}]);

这样，就像在SomeController1中一样，您可以获得图书的id，并使用服务从服务器获取。

请注意，当您从/some/route/abc123/转到/some/route/abc123/details/时，第一个（SomeController）的控制器将被销毁，第二个（SomeDetailsController）的控制器也将被创建。这就是我所说的"查看生命周期"，这就是为什么你应该在服务中实现应用程序逻辑的原因，因为它将在这个过渡期间可用。

希望能有所帮助。祝你好运

相关文章：