javascript - AngularJS 预期信息未显示

Question

我正在开发一个移动应用程序，该应用程序从服务器(WEBAPI)获取作业列表并填充适当的字段。当用户单击职位名称时，应用程序将转到详细信息页面，其中需要再次显示职位信息。

我在获取要显示的信息时遇到问题。

这是索引:

.state('jobs',{
            abstract: true,
            url: '/jobs',
            templateUrl: 'modules/jobs/views/jobs.html',
            controller: ['$scope', '$state', '$stateParams', 'jobs', function($scope, $state, $stateParams, jobs) {

                jobs.getData()
                    .then(function(jobs) {
                        $scope.jobs = jobs;
                    });

            }]
        })
        // Jobs > List
        .state('jobs.list', {
            url: '',
            title: 'All Jobs',
            templateUrl: 'modules/jobs/views/jobs.list.html' 
        })
        // Jobs > Detail
        .state('jobs.detail', {
            url: '/{JobId:[0-9]{1,4}}',
            title: 'Job Details',
            views: {
                'details': {
                    templateUrl: 'modules/jobs/views/jobs.detail.html',
                    controller: ['$scope', '$state', '$stateParams', 'utils', function($scope, $state, $stateParams, utils) {
                        $scope.job = utils.findById($scope.jobs, $stateParams.JobId);

                        $scope.edit = function(){
                            $state.go('.edit', $stateParams);
                        };

                    }]
                }, 
                '': {
                    templateUrl: 'modules/jobs/views/jobs.materials.html',
                    controller: ['$scope', 'materials', '$stateParams', function($scope, materials, $stateParams) {

                        materials.getDataById($stateParams.JobId)
                            .then(function(materials) {
                                $scope.materials = materials;
                            });

                        $scope.subHeader = 'Bulk Sack Materials';

                    }]
                }
            }
        })

这是服务:

app.factory('jobs', ['$resource', '$q', '$http', 'localStorageService', function($resource, $q, $http, localStorageService) {
    localStorageService.set('SessionId', 'A00DB328-7F9C-4517-AD5D-8EAA16FBBC8F');

    var SessionId = localStorageService.get('SessionId');
    return {
        getData: function() {
            var deferred = $q.defer();
            $http.get(baseUrl + 'Job/GetJobs?SessionId=' + SessionId, {
                cache: true
            }).success(function(jobs) {
                deferred.resolve(jobs);
            });
            return deferred.promise;
        }

    };

}]);

app.factory('materials', ['$resource', '$q', '$http', 'localStorageService', function($resource, $q, $http, localStorageService) {

    var SessionId = localStorageService.get('SessionId');

    return {
        getDataById: function(id) {
            var deferred = $q.defer();
            $http.get(baseUrl + 'Material/GetMaterials/' + id + '?SessionId=' + SessionId, {
                cached: 'true'
            }).success(function(materials) {
                deferred.resolve(materials);
            });
            return deferred.promise;
        }
    };

}]);

这是 utils 服务:

app.factory('utils', function() { 
    return {
        findById: function findById(a, id) {
            for (var i = 0; i < a.length; i++) {
                if(a[i].id === id) {
                    return a[i];
                }
            }
            return null;
        }
    };
});

这是 job.list 的 HTML:

<div class="list-group">
<a class="list-group-item" ng-repeat="job in jobs" ui-sref="jobs.detail({ JobId: job.JobId })"> 
<dl>
    <dt>{{job.Name}}</dt>
    <dd>{{job.Location}}</dd>
</dl>

关于如何让它发挥作用的一些见解会很棒。谢谢你-

Answer 1

如果我正确推断了您的目标，那么您的问题在于以下行:

$scope.job = utils.findById($scope.jobs, $stateParams.JobId);

$scope.jobs 将不会像您期望的那样存在。作业对象是在 ListView 的 Controller 范围内创建的，而不是在详细信息 View 的 Controller 范围内创建的。你会想要做一些像在 '' Controller 中那样的事情

JobService.getJobById($stateParams.JobId).then(function(data) {
     $scope.job = data;
});