Question

在ajax调用的数据可用且$ scope.xxxx使用所需数据更新后，部分HTML不会立即更新。

数据绑定仅在我单击部分html上的任何按钮时发生。所以看起来在ajax调用完成后，$ scope.trans正在填充，但只有当事件发生在部分HTML上时才会应用。

需要帮助才能理解我做错了什么。

HTML代码：

 <body ng-app="mainapp">
 <div id="container" class="container-fluid" >
  <nav class="row">
   <ul id="mainnav" class="nav nav-tabs">
    <li class="active" 
     data-toggle="tab" >    <a href="#/trs"   > Trs <a></li>
    <li data-toggle="tab">  <a href="#/grp"   > Grp </a></li>
    <li data-toggle="tab">  <a href="#/tcase" > TCase </a></li>
   </ul>
  </nav>
 <section class="row">
    <div ng-view></div>     
 </section>
 </div>

部分HTML：

<div ng-class="shrink" style="margin-top:4px">
<div class="col-md-11 btn-toolbar" style="margin-bottom:4px">
  <button type="button" class="btn btn-default" ng-click="getTrans('PRP')">Prev Page</button>
  <button type="button" class="btn btn-default " ng-click="getTrans('FIP')"> First Page </button>
  <button type="button" class="btn btn-default " ng-click="getTrans('LAP')"> Last Page </button>
  <button type="button" class="btn btn-default " ng-click="getTrans('NEP')"> Next Page </button>
</div>
<table class="table-striped table-bordered table-hover">
<colgroup>
<col class="col-md-1">
<col class="col-md-1">
<col class="col-md-1">
<col class="col-md-3">
<col class="col-md-1">
<col class="col-md-1">
<col class="col-md-1">
</colgroup>
<tbody>
  <tr>
    <th scope="col">ID &nbsp <a href="#"><span class="glyphicon glyphicon-sort-by-alphabet"></span></a></th>
    <th scope="col">Mt</th>
    <th scope="col">Mi</th>
    <th scope="col">Desc</th>
    <th scope="col">UID</th>
    <th scope="col">Date Time</th>        
  </tr>
  <tr ng-repeat="Rec in trans.DisRec">
    <td>{{Rec.Id}}</td>
    <td>{{Rec.Format}}</td>
    <td>{{Rec.mi}}</td>
    <td>{{Rec.desc}}</td>
    <td>{{Rec.uId}}</td>
    <td>{{Rec.date}}&nbsp;{{Rec.time}}</td>
  </tr>
</tbody>
</table>
</div>
  <div id="filteraside" ng-show="filteron" class="col-md-6">
    <div ng-include="'transFilter.html'">    </div>
</div>

Controller JS：

var app = angular.module('mainapp',['ngRoute','ngResource']);

app.controller('transcations',['$scope','dataFactory',
               function($scope,dataFactory) {   

     var httpResult = {data:"",status:""};

     var handleSuccess = function(data, status) {
                        httpResult.data = data;
                        httpResult.status =  status;
                };

     var handleError = function(data, status) {
                      httpResult.data = data;
                       httpResult.status =  status;
                      };

     $scope.getTrans = function(func){
        tab = 'trans';
        dataFactory.getTrans(tab,func)
                     .success (handleSuccess)
                     .error(handleError);
        $scope.trans = httpResult.data;
        $scope.status =  httpResult.status;
    };
 }]);

app.config(function($routeProvider,$httpProvider){
$routeProvider.
when('/trs',{templateUrl:'transdis.html',
          controller: 'transcations'}).
when('/trs/detail',{templateUrl:'transDet.html',
          controller: 'transcations'}).
when('/grp',{templateUrl:'groupdis.html'}).
when('/tcase',{templateUrl:'tcdis.html'}).
otherwise({redirectTo: '/trs'});
 });

/*Rest Service definations*/ 
app.factory('dataFactory', ['$http','$templateCache', 
              function($http,$templateCache) {

var urlBase = 'resource/';
var dataFactory = {};

dataFactory.getTrans = function(tab,func){
    return $http.get(urlBase + tab + '/' + func,
                             {cache: $templateCache});
};
 return dataFactory;
}]);

Answer 1

您遇到了问题，因为调用是异步的，当您设置范围值时，结果仍为空。

您需要使用$q服务来处理响应，以便控制器功能在设置范围内的值之前等待工厂响应。

以下是您使用$q更新的javascript并等待回复。

var app = angular.module('mainapp',['ngRoute','ngResource']);

app.controller('transcations',['$scope','dataFactory',
               function($scope,dataFactory) {   

     $scope.getTrans = function(func){
        tab = 'trans';
        dataFactory.getTrans(tab,func)
                     .then(function(httpResult) {
                        $scope.trans = httpResult.data;
                        $scope.status =  httpResult.status; 
                     });
    };
}]);

app.config(function($routeProvider,$httpProvider){
$routeProvider.
    when('/trs',{templateUrl:'transdis.html',
              controller: 'transcations'}).
    when('/trs/detail',{templateUrl:'transDet.html',
              controller: 'transcations'}).
    when('/grp',{templateUrl:'groupdis.html'}).
    when('/tcase',{templateUrl:'tcdis.html'}).
    otherwise({redirectTo: '/trs'});
});

/*Rest Service definations*/ 
app.factory('dataFactory', ['$http','$templateCache', '$q',
    function($http,$templateCache,$q) {

        var urlBase = 'resource/';
        var dataFactory = {};

        dataFactory.getTrans = function(tab,func){
        var httpResult = {data:"",status:""};

        var handleSuccess = function(data, status) {
                    httpResult.data = data;
                    httpResult.status =  status;
                    $q.resolve(httpResult);
            };

        var handleError = function(data, status) {
                  httpResult.data = data;
                   httpResult.status =  status;
                  $q.resolve(httpResult);
                  };

        $http.get(urlBase + tab + '/' + func,
                         {cache: $templateCache})
                 .success (handleSuccess)
                 .error(handleError);
    };
return dataFactory;
}]);

DOM在返回ajax调用时未更新

1 个答案: