Question

我做了3个视图并将它们链接到一个控制器。在我的控制器中，我正在调用我所做的服务，该服务进行网络调用并获取一些我应该在前端显示的数据。麻烦的是，尽管我正确地做了一切，但它并没有显示这些数据。

这就是结构的外观。

路线：

$stateProvider
  .state('app.view1', {
    url: '/view1',
    templateUrl: 'scripts/modules/testModule/views/view1.html',
    controller: 'testModuleCtrl',
    controllerAs: 'vm',
    resolve: {
      InitialData: authResolver
    }


  }).state('app.view2', {
    url: '/view2',
    templateUrl: 'scripts/modules/testModule/views/view2.html',
    controller: 'testModuleCtrl',
    controllerAs: 'vm',
    resolve: {
      InitialData: authResolver
    }


  }).state('app.view3', {
    url: '/view3',
    templateUrl: 'scripts/modules/testModule/views/view3.html',
    controller: 'testModuleCtrl',
    controllerAs: 'vm',
    resolve: {
      InitialData: authResolver
    }


  })

控制器：

    (function () {
   'use strict';

  angular
    .module('com.module.testModule')
    .controller('testModuleCtrl', testModuleCtrl);

  testModuleCtrl.$inject = ['$state','$rootScope','UserService', '$stateParams', 'ReportService','SharedDataService','BlogService',
'toastr', 'InitialData', 'SharedFunctionService'];
  function testModuleCtrl($state, $rootScope, UserService, $stateParams, ReportService, SharedDataService,BlogService,
                     toastr, InitialData, SharedFunctionService) {
    var vm = this;

     vm.getUserData = getUserData;




     vm.goToPage1 = goToPage1;
     vm.goToPage2 = goToPage2;
    vm.goToPage3 = goToPage3;

function goToView1(){
  $state.go('app.view1');
  getUserData("someArg");


}

function goToView2(){

  console.log("Going to View 2")
  $state.go('app.view2');
  getUserData("someArg");


}

function goToView3(){
  console.log("Going to View 3")
  $state.go('app.reportView3');


}

function getUserData(argumentType) {
  ReportService.GetTestReport("someArg").then(function reportSuccessCallback(result) {
    vm.result = result.data;
    console.log("CHECK OUT THIS RAD RESULT, BRO ----> ");
        console.log(vm.result);
          }, function reportErrorCallback(reason) {
        vm.reason = reason.data;
        console.log("The reason of failure is this --=> ")
        console.log(vm.reason);
      })
    } 
    }  
    })();

在html中，我试图通过这样做来渲染这个结果 {{vm.result}}

但它没有显示。我也在管理范围。按照John-Papa Style Angular 1.x指南中的规定执行所有操作

我从早上起就一直在这，我准备把头发拉出来。我在这做错了什么？我正在以非常优化的方式尝试一切。 PS。新来的。

编辑：根据要求，我也在添加服务代码。

服务

(function () {
  'use strict';

  angular
    .module('com.module.tests')
    .factory('ReportService', ReportService);

  ReportService.$inject = ['$http','ENV'];
  function ReportService($http,ENV) {

    var baseUrl=ENV.apiUrl+'/tests/';

    var service = {

  GetTestReport: GetTestReport

};

return service;



function GetTestReport(type){
  return $http.get(baseUrl + type + '/testReport').then(handleSuccess, handleError);
}




// private functions

function handleSuccess(res) {
  return res.data;
}

function handleError() {
  return {success: false}
}

  }

})();

Answer 1

上述代码的错误是执行流程。

首先，您使用$state.go()导航到其他视图，然后调用getUserData()。

首先，您已导航到新视图和相应的控制器（使用相同控制器的天气或多个视图的不同控制器）具有不同的范围。

为了克服这一点，您可以将值作为状态参数传递给路由，并在控制器中从路由中选择状态参数并调用getUserData 有这个价值。

路线：

$stateProvider
   .state('app.view1', {
      // Append query parameters here in the url.

      url: '/view1?q',
      templateUrl: 'scripts/modules/testModule/views/view1.html',
      controller: 'testModuleCtrl',
      controllerAs: 'vm',
      resolve: {
         InitialData: authResolver
      }
   }).state('app.view2', {
      // Append query parameters here in the url.

      url: '/view2?q',
      templateUrl: 'scripts/modules/testModule/views/view2.html',
      controller: 'testModuleCtrl',
      controllerAs: 'vm',
      resolve: {
        InitialData: authResolver
      }
   }).state('app.view3', {
      // Append query parameters here in the url.

      url: '/view3?q',
      templateUrl: 'scripts/modules/testModule/views/view3.html',
      controller: 'testModuleCtrl',
      controllerAs: 'vm',
      resolve: {
        InitialData: authResolver
      }
   });

在您的控制器中：

(function () {

   'use strict';

   angular
    .module('com.module.testModule')
    .controller('testModuleCtrl', testModuleCtrl);

    testModuleCtrl.$inject = ['$state','$stateParams', 'ReportService', 'InitialData'];

    function testModuleCtrl($state, $stateParams, ReportService, InitialData) {

         var vm = this;

         vm.getUserData = getUserData;

         vm.goToPage1 = goToPage1;
         vm.goToPage2 = goToPage2;
         vm.goToPage3 = goToPage3;

         // Here check weather the params is passed on route
         if(typeof $stateParams.q !== "undefined" && $stateParams.q !== '')  {
               // load the data using service by passing params
               getUserData($stateParams.q);
         }



         function goToView1(){ 
             $state.go("app.view1", {q:'someArg'});
         }

         function goToView2() {
             $state.go("app.view2", {q:'someArg'});
         }

         function goToView3(){
             $state.go('app.reportView3', {q: 'someArg'});
         }

         function getUserData(query) {
              // Your service code to load the data based on "query".

              ReportService.GetTestReport(query).then(function(result) {
                 vm.result = result.data;
              }, function(reason) {
                 vm.reason = reason.data;
              });
         } 
     }  
})();

在您的服务GetTestReport方法

   function GetTestReport(type){
       // return promise directly
       return $http.get(baseUrl + type + '/testReport');
   }

Answer 2

有些错误：

服务声明：

function GetTestReport(type){
  return $http.get(baseUrl + type + '/testReport').then(handleSuccess, handleError);
}

你应该把它改成：

function GetTestReport(type, handleSuccess, handleError){
  return $http.get(baseUrl + type + '/testReport').then(handleSuccess, handleError);
}

然后你打电话给它：

ReportService.GetTestReport("someArg", function(result){
    vm.result = result.data;
    console.log(vm.result);
}, function(error){
    vm.reason = reason.data;
    console.log(vm.reason);
});

您还可以在状态加载完成之前从服务中获取数据：

$stateProvider
  .state('app.view1', {
    url: '/view1',
    templateUrl: 'scripts/modules/testModule/views/view1.html',
    controller: 'testModuleCtrl',
    controllerAs: 'vm',
    resolve: {
      InitialData: authResolver,
      YourResult: function(ReportService) {
            return ReportService.GetTestReport().$promise
      }
    }

您应该将服务更改为以下内容：

function GetTestReport(type){
      return $http.get(baseUrl + type + '/testReport');
}

然后在vm控制器中，你可以通过这样做来连接YourResult：

.controller("vm", function(YourResult, InitialData){
// your controller logic
}

来自服务的角度数据未显示在前端

2 个答案: