Question

我有以下视图控制器。

'use strict';

angular.module('servers').controller

('PlcsrvnonprodsController', ['$scope',
'$stateParams', '$location', 'Authentication', 

'Plcsrvnonprods',
'Verticals','Datacenters','Functns','Technologys','Re

gions','$filter',
    function($scope, $stateParams, $location, 

Authentication, Plcsrvnonprods,


Verticals,Datacenters,Functns,Technologys,Regions,

$filter) {
          $scope.authentication = 

Authentication;
        $scope.currentPage = 1;
        $scope.pageSize = 10;
        $scope.offset = 0;
            $scope.loading = false;
            console.log('Now i am not 

dispalying the view'+$scope.loading);
            $scope.verticals = 

Verticals.query();
            $scope.datacenters = 

Datacenters.query();
            $scope.regions = 

Regions.query();
            $scope.functns = 

Functns.query();
            $scope.technologys = 

Technologys.query();
        // Page changed handler
        $scope.pageChanged = function() {
        $scope.offset = ($scope.currentPage - 

1) * $scope.pageSize;
        };


            var appendVars = function 

appendVars(p) {
                p.functn = $filter

('filter')($scope.functns, {_id: p.functn})[0];
                p.region = $filter

('filter')($scope.regions, {_id: p.region})[0];
                p.technology = 

$filter('filter')($scope.technologys, {_id: 

p.technology})[0];
                p.datacenter = 

$filter('filter')($scope.datacenters, {_id: 

p.datacenter})[0];
                p.vertical = $filter

('filter')($scope.verticals, {_id: p.vertical})[0];
            };


      //Find a list of serversrc
      $scope.find = function() {
         Plcsrvnonprods.query(function 

loadedPlcsrvnonprods(plcsrvnonprods){


plcsrvnonprods.forEach(appendVars);


$scope.plcsrvnonprods = plcsrvnonprods;
                 });
      }

            //Find requested server

            $scope.findOne = function() {
                $scope.plcsrvnonprod 

= Plcsrvnonprods.get({


plcsrvnonprodId: $stateParams.plcsrvnonprodId
                }, appendVars
               );
                 $scope.loading=true;
                console.log('All 

backend-calls succeeded, now displaying the view'+

$scope.loading);
            }


            // Update existing Product
            $scope.update = function() {
                var plcsrvnonprod = 

$scope.plcsrvnonprod;


plcsrvnonprod.vertical = plcsrvnonprod.vertical._id;


plcsrvnonprod.datacenter = 

plcsrvnonprod.datacenter._id;
                plcsrvnonprod.region 

= plcsrvnonprod.region._id;
                plcsrvnonprod.functn 

= plcsrvnonprod.functn._id;


plcsrvnonprod.technology = 

plcsrvnonprod.technology._id;
                plcsrvnonprod.

$update(function() {


$location.path('plcsrvnonprods/' + 

plcsrvnonprod._id);
                }, function

(errorResponse) {
                    $scope.error 

= errorResponse.data.message;
                });
            };

            // Remove existing Product
            $scope.remove = function

(plcsrvnonprod) {
                if ( plcsrvnonprod ) 

{


plcsrvnonprod.$remove();

                    for (var i in 

$scope.plcsrvnonprods) {
                        if 

($scope.plcsrvnonprods [i] === plcsrvnonprod) {


$scope.plcsrvnonprods.splice(i, 1);
                        }
                    }
                } else {


$scope.plcsrvnonprod.$remove(function() {


$location.path('plcsrvnonprods');
                    });
                }
            };

            //Search for the item.
            $scope.plcsrvnonprodSearch = 

function(product) {
                $location.path

('plcsrvnonprods/' + product._id);
            }
    }
]);

我有以下视图页面： -

<section data-ng-controller="PlcsrvnonprodsController" data-ng-init="findOne()">
    <div class="page-header">
    <h1 data-ng-bind="plcsrvnonprod.dbname"></h1>
        <style>
        .ng-cloak {
            display: none !important;
        }
        </style>
    <div class="well col-md-12" ng-if="loading" class="ng-cloak">
            <div class="row">
      <div class="col-md-2">
        <Strong>Vertical</Strong>: <p>{{plcsrvnonprod.vertical.name}}</p>
      </div>
      <div class="col-md-1"></div>
      <div class="col-md-2">
        <Strong>Region</Strong>: <p>{{plcsrvnonprod.region.name}}</p>
      </div>
      <div class="col-md-1"></div>
      <div class="col-md-2">
        <Strong>DataCenter</Strong>: <p>{{plcsrvnonprod.datacenter.name}}</p>
      </div>
      <div class="col-md-1"></div>
      <div class="col-md-2">
        <Strong>DbTechnology</Strong>: <p>{{plcsrvnonprod.technology.name}}</p>
      </div>
      <div class="col-md-1"></div>
    </div>
        <div class="row">
            <div class="col-md-2">
        <Strong>Biz Function</Strong>: <p>{{plcsrvnonprod.functn.name}}</p>
      </div>
            <div class="col-md-1"></div>
            <div class="col-md-2">
        <Strong>DbMode</Strong>: <p data-ng-bind="plcsrvnonprod.environment"></p>
      </div>
      <div class="col-md-1"></div>
            <div class="col-md-2">
        <Strong>DbClustering</Strong>: <p data-ng-bind="plcsrvnonprod.clustered"></p>
      </div>
      <div class="col-md-1"></div>
        </div>
      <div class="row">
      <div class="col-md-2">
        <Strong>Hostname</Strong>: <p data-ng-bind="plcsrvnonprod.hostname"></p>
      </div>
      <div class="col-md-1"></div>
      <div class="col-md-2">
        <Strong>Dbname</Strong>: <p data-ng-bind="plcsrvnonprod.dbname"></p>
      </div>
      <div class="col-md-1"></div>
      <div class="col-md-2">
        <Strong>OS</Strong>: <p data-ng-bind="plcsrvnonprod.operating_system"></p>
      </div>
      <div class="col-md-1"></div>
      <div class="col-md-2">
        <Strong>DbVersion</Strong>: <p data-ng-bind="plcsrvnonprod.db_version"></p>
      </div>
      <div class="col-md-1"></div>
    </div>
    <div class="row">
      <div class="col-md-2">
        <Strong>MonitoringTool</Strong>: <p data-ng-bind="plcsrvnonprod.monitoring_tool"></p>
      </div>
      <div class="col-md-1"></div>
      <div class="col-md-2">
        <Strong>DbBkpStrategy</Strong>: <p data-ng-bind="plcsrvnonprod.backup_configuration"></p>
      </div>
      <div class="col-md-1"></div>
      <div class="col-md-2">
        <Strong>DbPriority</Strong>: <p data-ng-bind="plcsrvnonprod.criticality"></p>
      </div>
      <div class="col-md-1"></div>
      <div class="col-md-2">
        <Strong>DrSetup</Strong>: <p data-ng-bind="plcsrvnonprod.dr"></p>
      </div>
      <div class="col-md-1"></div>
    </div>
    <div class="row">
      <div class="col-md-2">
        <Strong>WalletUsage</Strong>: <p data-ng-bind="plcsrvnonprod.walletused"></p>
      </div>
      <div class="col-md-1"></div>
      <div class="col-md-2">
        <Strong>ApplName</Strong>: <p data-ng-bind="plcsrvnonprod.app_name"></p>
      </div>
      <div class="col-md-1"></div>
      <div class="col-md-2">
        <Strong>AppSpoc</Strong>: <p data-ng-bind="plcsrvnonprod.app_spoc"></p>
      </div>
      <div class="col-md-1"></div>
      <div class="col-md-2">
        <Strong>AppDl</Strong>: <p data-ng-bind="plcsrvnonprod.app_mailer"></p>
      </div>
      <div class="col-md-1"></div>
    </div>
        <hr/>
    <div class="row">
      <div class="col-md-12">
        <Strong>Special Instructions</Strong>: <p data-ng-bind="plcsrvnonprod.spl_instructions"></p>
      </div>
    </div>
        <hr/>
    </div>
  </div>
  <div class="pull-right">
        <a class="btn btn-primary" href="/#!/plcsrvnonprods">
            <i class="glyphicon glyphicon-backward"></i>
        </a>
    <a class="btn btn-primary" href="/#!/plcsrvnonprods/{{plcsrvnonprod._id}}/edit">
      <i class="glyphicon glyphicon-edit"></i>
    </a>
    <a class="btn btn-primary" data-ng-click="remove();">
      <i class="glyphicon glyphicon-trash"></i>
    </a>
  </div>
</section>

以下是服务器如何响应，DESPITE使用 NG-秀要么 NG-斗篷

GET /regions 304 120.419 ms - -
GET /verticals 304 137.192 ms - -
GET /plcsrvnonprods/5a874124a1346df954dff435 304 120.148 ms - -
GET /technologys 304 124.048 ms - -
GET /functns 304 130.483 ms - -
GET /datacenters 304 154.593 ms -

GET请求作为AngularService Calls，＆＃34; technologys＆＃34;，＆＃34; functns＆＃34;和＆＃34;数据中心＆＃34; 比实际视图的GET执行得晚。这些值显示为NULL

。

我怎样才能得到这种行为？

GET /verticals 304 75.307 ms - -
GET /datacenters 304 134.414 ms - -
GET /regions 304 179.821 ms - -
GET /functns 304 165.429 ms - -
GET /technologys 304 188.973 ms - -
GET /plcsrvnonprods/5a873d2076cfd0153a315e87 304 169.278 ms - -

当发生这种情况时，我的视图会正确加载所有值，而CHANCE会发生这种情况，我不明白为什么会这样发生。

此致西

Answer 1

最后，经过几天的挣扎，我找到了这个工作，效果很好。

由于我是网络开发的新手，而且我还没有掌握它，我说这只是一个解决方法。

在我的视图中，我正在调用$ scope.findOne（），因为GET的执行速度比AngularService Calls快，我决定再次调用这个“findOne（）”，这样我的视图就会重新启动500毫秒后加载。

此时，所有AngularService调用都已完成。

因此，我已经向我的Angular Controller注入了$ timeout并执行了以下操作： -

//Find requested server

            $scope.findOne = function() {
                $scope.plcsrvnonprod = Plcsrvnonprods.get({
                    plcsrvnonprodId: $stateParams.plcsrvnonprodId
                }, appendVars
               );
                 $timeout( function(){ $scope.findOneAgain(); }, 500);
            }

            $scope.findOneAgain = function() {
                $scope.plcsrvnonprod = Plcsrvnonprods.get({
                    plcsrvnonprodId: $stateParams.plcsrvnonprodId
                }, appendVars
                 );
            }

现在，我的视图成功加载而没有任何问题。

我希望在我使用Angular和JavaScript配备技能之后永久解决这个问题。

通过我的调查，我发现使用$ promises将有助于异步调用，但我不太确定如何使用它们并实现它们，因为我不完全知道JavaScript / AngularJS。

我希望，这种解决方法可以帮助MEAN Stack中的一些初学者。

专家： - 请随时评论永久解决方案。与此同时，我将发展自己的技能并实现目标。

此致西

MEAN STACK AngularJS View页面在Angular Service Response之前加载

1 个答案: