Question

我在.net web api中使用Angular-JS。程序将显示“配置文件”列表，当用户点击任何配置文件时，它将导航到详细信息。

列表部分工作正常，但细节不显示任何数据代码如下：

var profileModule = angular.module('profileModule', ['ngResource', 'ngRoute']);

profileModule.config(['$routeProvider', function ($routeProvider) {
    $routeProvider
        .when('/profile', {
                controller: 'profileController',
                templateUrl: 'Partials/profileList.html'
        })
        .when('/profile/:profileId', {
            templateUrl: 'Partials/profileDetail.html',
            controller: 'profileDetailController'
        })
        .otherwise({ redirectTo: '/profile' });


}]);

profileModule.controller('profileController', function($scope, profileFactory) {
    $scope.profiles = [];

    function init() {
        $scope.profiles = profileFactory.query();
    }

    init();
});

profileModule.controller('profileDetailController', function ($scope, $routeParams, profileFactory) {
    $scope.profile = {};

    function init() {
        $scope.profile = profileFactory.get({ Id: $routeParams.profileId });

        }

    init();
});


profileModule.service('profileFactory', function ($resource) {
    return $resource("api/profiles/:Id");
});

和详细页面profileDetail.html看起来像这样

<div>
    <h2>profile Details</h2>
    <p>
        Name: <br/>
        {{profile.Name}}
    </p>
    {{doit}}
</div>

列表页面profileList.html看起来像这样

<div class="container">
    <h1>Profiles by sort order</h1>
    <span data-ng-repeat="profile in profiles | orderBy: 'Sequence'">
        <a data-ng-href="#/profile/{{profile.Id}}">
            {{profile.Name}}
        </a><br/>
    </span>
</div>

列表部分工作正常，当我点击链接时，我可以看到其余的调用web api如下

/简档/ 4

我可以看到返回的JSON

但细节页面上根本没有发生任何约束

Answer 1

当您对资源的GET请求只返回一个对象时，可以使用

$ resource服务的get（）函数。检查浏览器的开发人员工具，您可能会在控制台中看到错误：“资源配置错误。包含对象但得到数组的预期响应”。

要使代码正常工作，请修改init（）函数以使用query而不是get：

function init() {
  $scope.profile = profileFactory.query({ Id: $routeParams.profileId });
}

据我所知，这应该可以解决您的问题。如果没有，请在此处发表评论。

Angular JS中的绑定问题

1 个答案: