【问题标题】:how to load more than one service in $state resolve?如何在 $state 解析中加载多个服务?
【发布时间】:2016-03-14 08:56:25
【问题描述】:

我想在页面加载之前加载两个 API 为此我在 $stateProvider 中使用了以下代码

.state('admin-panel.default.jobadd', {
    url: '/jobadd/:jobID',
    templateUrl: 'app/search/jobadd.tmpl.html',
    controller: 'JobaddController', 
    resolve: {   
      jobAdd: ['Search', '$stateParams','$q', function(Search,$stateParams,$q) { //Search is service   
           var jobAdd = Search.jobAdd($stateParams.jobID);
           var isApplied = Search.is_job_applied($stateParams.jobID);
                jobAdd.$promise.then(function(response) {console.log('Resource 1 data loaded!')});
                isApplied.$promise.then(function(response) {console.log('Resource 2 data loaded!')});

             return $q.all([jobAdd.$promise, isApplied.$promise]);
              }]       
             },       
    data: {
        requireLogin: true
    }        

 });
})

但是注入控制器时没有给出数据,页面看起来是空白的

我的控制器代码是

    .controller('JobaddController', function ($scope, $mdDialog, $state, jobAdd, Profile) {

        $scope.jobs = jobAdd[0];
        $scope.benifits = jobAdd[0].benifits;

        if($scope.jobs.short_listed == 1)
            $scope.jobs.flag = true;
        else
            $scope.jobs.flag = false;

        $scope.checkShortList= function(job){
            if(job.flag){
                Profile.rmShortList(job.short_list_id);
                job.flag = false;
            }
            else{
                if(job.short_list_id === null){ 
                     Profile.addNewShortList(job.id).then(function(response){
                        job.short_list_id = response.short_list_id;
                     });
                }
                else
                    Profile.addShortList(job.short_list_id,job.id);
                job.flag = true;
            }
        };


        $scope.companyModal = function(ev) {
        $mdDialog.show({
          controller: 'CompanyDetailsController',
          templateUrl: 'app/search/company-details.tmpl.html',
          parent: angular.element(document.body),
          targetEvent: ev,
        })
        .then(function(answer) {
          $scope.alert = 'You said the information was "' + answer + '".';
        }, function() {
          $scope.alert = 'You cancelled the dialog.';
        });
      };


        $scope.applyModal = function(ev) {
        $mdDialog.show({
          controller: 'ApplyController',   
          templateUrl: 'app/search/apply.tmpl.html',
          locals: { Jobid: $scope.jobs.id },
          parent: angular.element(document.body),
          targetEvent: ev,
          resolve: {
                    shortProfile: ['Profile', function(Profile) {
                       return Profile.shortProfile();
                        }]
                    },                       
        })
        .then(function(answer) {
          $scope.alert = 'You said the information was "' + answer + '".';
        }, function() {
          $scope.alert = 'You cancelled the dialog.';
        });
      };



         var container = angular.element(document.getElementById('container'));
        var section2 = angular.element(document.getElementById('section-2'));

        $scope.toTheTop = function() {
          container.scrollTop(0, 5000);
        };

        $scope.toSection2 = function() {
          container.scrollTo(section2, 0, 1000);
        };



    })

在服务代码中

    .service('Search', [ '$http', '$q', 'API',
    function($http, $q, API) {

        var data = '';
        this.jobAdd =  function(job_id) {
            var def = $q.defer();
            $http({
                url: API.url+'get_job_add_detail?job_id=' + job_id,
                method: "GET"
                }).success(function(response) { 
                    if(response.status == 'Success'){
                        data = response.data;
                        def.resolve(data);
                    }   
             }).error(function(response) {
                    console.log (response); 
                    if(response.status == 'Failed'){
                        data = response.msg;
                        def.reject(data);   
                    }
            });
            return def.promise;
        }


         this.isJobApplied =  function(job_id) {
            var def = $q.defer();
            $http({
                url: API.url+'is_job_applied?job_id='+job_id,
                method: "GET",
                }).success(function(response) { 
                    if(response.status == 'Success'){
                        data = response.data;
                        def.resolve(data);
                    }   
             }).error(function(response) {
                    console.log (response); 
                    if(response.status == 'Failed'){
                        data = response.msg;
                        def.reject(data);   
                    }
            });
            return def.promise;
        }
    }]);

这里有什么问题??如何在 $state 解析中附加更多服务?

【问题讨论】:

  • 尝试让您的控制器缩小也安全。 .controller('JobaddController',["$scope", "$mdDialog", "$state", "jobAdd", "Profile", function ($scope, $mdDialog, $state, jobAdd, Profile){}]
  • 当您调用then 时,您必须返回一个值,以便jobAdd[0] 可以拥有该值。但无论如何我同意@ngLover 的回答:)
  • 我已经发布了控制器的完整代码..,页面仍然是空白..
  • 这个jobAdd.$promise.then(function(response) {console.log('Resource 1 data loaded!')}); 不会返回任何东西。要么丢失then,要么在then 内部返回response

标签: angularjs angularjs-scope angular-ui-router angularjs-service angular-promise


【解决方案1】:

您可以提供多种服务。

resolve: {   
            jobAdd: ['Search', '$stateParams', function(Search,$stateParams) {                   
                        return Search.jobAdd($stateParams.jobID);
                    }],
            isApplied: ['Search', '$stateParams', function(Search,$stateParams) {                   
                        return Search.isJobApplied($stateParams.jobID);
                    }]      
}

【讨论】:

  • resolve: { jobAdd: ['Search', '$stateParams', function(Search,$stateParams) { return Search.jobAdd($stateParams.jobID); }], isApplied: ['Search', '$stateParams', function(Search,$stateParams) { return Search.is_job_applied($stateParams.jobID); }] }
  • 谢谢@user3391137
  • 能否提供完整的代码 sn-p 或 plunker,因为它工作正常
  • 你能提供你试用plunkr的链接吗?
  • 全码意思是你要哪个码sn-p?因为我在这里附加了 $state 和控制器代码。
猜你喜欢
  • 2018-06-22
  • 1970-01-01
  • 2019-11-12
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多