Question

我创建了一个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只需将我带到新页面而不加载新数据。

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

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

P.S。我是angularjs的新手。

Answer 1

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

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

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

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

Answer 2

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

首先，您将两个不同的模块分配给

中的相同var

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

和

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

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

其次，您正在定义视图逻辑中的应用程序逻辑。即使angular不强制您使用MVC模式，也要注意控制器应该是视图（HTML）和应用程序逻辑（服务）之间的“桥梁”。因此，您应该在service。

中实现“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）将被销毁，第二个控制器（{{1} }}）将被创建。这就是我想要的“查看生命周期”，这就是为什么你应该在服务中实现app逻辑的原因，因为它将在这个过渡期间可用。

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

数据未显示在新页面上

2 个答案: