Question

长话短说，我有一个2页的角度js应用程序（原因是因为我将它集成到CMS模板中，单页应用程序与侧边栏中的CMS小部件不能很好地工作）。

无论如何......我有一个很大的结果页面，它使用AngularJS 1.5.x工厂和$ q服务提取3个不同的JSON文件。这全部由名为 EventsListCtrl 的控制器控制。

当您单击某个项目时，它会转到详细信息页面，这是另一个使用angular的单页应用程序（如前面所述）。详细信息页面在网址中选取x个变量，然后通过正确的JSON文件来提取正确的记录。这由一个名为 EventDetailCtrl 的独立控制器控制。

所以它只获取1个JSON，具体取决于URL中的内容，但我注意到它在日志中仍然会提取所有三个JSON文件。如何让它停止拉动所有三个JSON文件。

目的是降低页面加载速度并停止提取我不需要的JSON文件。

我的详细控制器示例如下所示：

// Event Detail Page
    function eventDetailCtrl(MyService, $filter){
        var vm = this;

        vm.eventStatus = 'Loading';
        vm.eventId = window.location.toString().split('?id=')[1].split('&ref')[0];
        vm.noResults = '<h4>Sorry, something went wrong.</h4>The page you requested could not be found.';

        activateEventDetail();

        function activateEventDetail(){
            MyService.getEventData.then(
                function(response){
                    vm.eventResults = response;
                    vm.eventId = $filter('filter')(vm.eventResults,{Id: vm.eventId})[0];
                    vm.eventStatus = 'Success';
                    if(vm.eventId != undefined){
                       window.document.title = "Network West Midlands - Event: " + vm.eventId.Title;
                    }else{
                        vm.eventStatus = 'Error';
                        window.document.title = "Network West Midlands - Event: " + 'Sorry';
                    }
                },function(error){
                    vm.eventStatus = 'Error';
                    console.log('EventDetail Error: ' + error.statusText);
                }
            );
        }
    }

MyService是我的工厂，它使用标准的promises技术，如下所示：

.factory('MyService',['$http','$q', myService]);

    function myService($http, $q){
        var eventfulData = $http.get('FutureEvents', {cache: 'true'});
        var googleData = $http.get('WmPlacesList', {cache: 'true'});
        var facebookEvents = $http.get('FacebookNwm', {cache: 'true'});

        return {
            getEventData: getData(eventfulData),
            getAttractionData: getData(googleData),
            getfbEvents: getData(facebookEvents)
        }

        function getData(jsonData){
            /* Just a generic deferred object that we will resolve manually. */
            var defer = $q.defer();
            $q.when($q.all([jsonData])).then(getDataComplete,getDataFail);

            return defer.promise;

            function getDataComplete(response){
                var finalData = response[0].data;
                defer.resolve(finalData);
            }

            function getDataFail(response){
                defer.reject(response);
            }

        }
    }

Answer 1

您有几个问题

   return {
        getEventData: getData(eventfulData),// invokes getData()
        getAttractionData: getData(googleData),
        getfbEvents: getData(facebookEvents)
    }

这是调用getData而不是作为参考传递。这就是你收到3个请求的原因。

你可以把它写成

return {
  getEventData: function() {
    return getData(eventfulData);
  },
  getAttractionData: function() {
    return getData(googleData);
  },
  getfbEvents: function() {
    return getData(facebookEvents);
  }
}

由于$q已经返回承诺，因此无需在getData()中使用$http。它可以简化为：

function getData(jsonData) {
  return jsonData.then(getDataComplete)
                 .catch(getDataFail);    
}

function getDataComplete(response) {
  return response.data;
}

function getDataFail(response) {
  // not sure what you want to do for errors
}

现在在控制器中，您需要调用MyService.getEventData

所以改变：

MyService.getEventData.then(

要

MyService.getEventData().then(

AngularJS JSON一直在详细信息页面上获取

1 个答案: