Question

我还在SPA中学习Angular，而我正在将MVC应用程序转换为Angular。我有一个主/细节场景，其中母版页是成员列表，详细信息页面是所选成员的单独记录。我还没有学会一种很好的调试方法，以帮助解决这个问题，但从我可以看到这应该是返回数据。我不知道的是如何在页面中正确显示它。成员页面工作正常，但详细信息页面不显示任何数据。

我可以看到，当我点击“查看”以查看详细信息时，我可以看到该URL具有正确的Web API端点和正确的memberId。当我在Fiddler中查看带有memberId的URL端点时，我看到正在返回的正确数据。因此，Web API正常运行。

这是我的app.js文件，它使用'/memberDetail/:memberId'路由，我可以在浏览器中显示'app/views/memberDetail.html'页面。因此应该正确配置路由。

(function () {

    var app = angular.module('troopApp', ['ngRoute','appFilters']);      //('moduleName', [array of injected modules])

    app.config(function($routeProvider) {
        $routeProvider
            .when('/', {
                controller: 'MembersController',
                templateUrl: 'app/views/members.html'
            })
            .when('/memberDetail/:memberId', {
                controller: 'MembersController',
                templateUrl: 'app/views/memberDetail.html'
            })
            .otherwise({ redirectTo: '/'});
    });


}());

在我的控制器内部，我只提取了一些代码，所以我没有太多内容可以滚动。

var MemberDetailController = function ($scope, $routeParams, memberFactory) {
        var memberId = $routeParams.memberId;
        $scope.member = null;

        function init() {
            memberFactory.getMember(memberId)
               .success(function (member) {
                   $scope.member = member;
               })
               .error(function (data, status, headers, config) {
                   //handle error
               });
        }
        init();
    };

    MemberDetailController.$inject = ['$scope', '$routeParams', 'memberFactory'];

    angular.module('troopApp')
      .controller('MemberDetailController', MemberDetailController);

这是memberFactory.js文件。

(function () {
    var memberFactory = function ($http) {

        var factory = {};

        factory.getMembers = function () {
            return $http.get('/api/MemberApi');
        };

        factory.getMember = function (memberId) {
            return $http.get('/api/MemberApi/' + memberId);
        };

        return factory;
    };

    memberFactory.$inject = ['$http'];

    angular.module('troopApp').factory('memberFactory', memberFactory);

}());

这是我的HTML。

<div class="container">
    <h2>Member Detail</h2>
    <p />
    <div class="table-responsive">
        <table class="table table-bordered table-striped table-hover">
            <tr>
                <td>Name: </td>
                <td>{{ member.FirstName }} {{ member.LastName }}</td>
            </tr>
        </table>
    </div>
</div>

Answer 1

我终于找到了自己的问题。我将我的控制器整合到一个名为membersController.js的文件中。所以，没有正确考虑它我在路由器中设置控制器的名称，当它应该是详细控制器的实际名称时，它指向JS文件＆＃34; MemberDetailController＆＃34;。

我将app.js文件更改为：

(function () {

    var app = angular.module('troopApp', ['ngRoute','appFilters']);      //('moduleName', [array of injected modules])

    app.config(function($routeProvider) {
        $routeProvider
            .when('/', {
                controller: 'MembersController',
                templateUrl: 'app/views/members.html'
            })
            .when('/memberDetail/:memberId', {
                controller: 'MemberDetailController',
                templateUrl: 'app/views/memberDetail.html'
            })
            .otherwise({ redirectTo: '/'});
    });

}());

Angular中Master / Detail场景中没有详细数据

1 个答案: