來自服務的角度數據沒有在前端顯示

我做了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 Guidelines for 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} 
} 

    } 

})();

來源

2016-09-20 SarthakBatra

你能告訴我你的ReportService的代碼，請。 –

你好@Arno_Geismar我在問題中添加了服務代碼。有什麼我失蹤了嗎？ – SarthakBatra

什麼是錯的，上面的代碼是執行流程。

首先，您使用的是$state.go()導航到不同的視圖，之後，您致電getUserData()。

因此，首先導航到新的視圖和相應的控制器（天氣您使用相同的控制器或不同的控制器爲多個視圖）具有不同的範圍。

爲了克服這種情況，你可以將值狀態PARAMS通過路由和控制器挑選從路由狀態PARAMS和調用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'); 
    }

來源

2016-09-20 11:50:29 jaguwalapratik

嘿@jaguwalapratik ..我不認爲我理解。你能不能把它展示給我，如何做，如何做。我剛剛拿起Angular並嘗試改進。 – SarthakBatra

好吧，我會更新答案。 – jaguwalapratik

有些事情是錯的：

服務聲明：

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'); 
}

然後在虛擬機控制器，你可以通過做這個連線YourResult：

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

來源

2016-09-20 11:59:53

來自服務的角度數據沒有在前端顯示

回答

相關問題