网站开发进阶(二十一)Angular项目信息错位显示问题解决

Angular项目信息错位显示问题解决

绪

最近在项目开发过程中遇到这样一个棘手的问题:查询出所有订单信息后，点击选择某一个订单，查询出的结果是上一次查询所得的结果。而且会出现点击两次才可以显示订单详情的问题。

通过Chrome进行代码调试，发现事件执行次序与自己的点击事件次序存在不一致的情况。

相关代码:

doSearch();	//查询收货人基本信息
var modalInstance = $modal.open({	// 开始执行控制器BillDtlPopCtrl
templateUrl: 'billDtlContent.html',	// 模态窗口的地址，指向创建的视图
controller: 'BillDtlPopCtrl',	// 初始化模态范围,为$modal指定的控制器，初始化$scope，该控制器可用$modalInstance注入
size: size,
resolve: {	// 定义一个成员并将他传递给$modal指定的控制器，相当于routes的一个reslove属性，如果需要传递一个objec对象，需要使用angular.copy()
items: function () {
     return $scope.items;
    }
}
});
doSearch()方法体如下:
var doSearch = function(){
console.log("doSearching...");
/**
* 此处存在问题，在输出"doSearching..."后，直接进入BillDtlPopCtrl中，在执行完其中的方法后才执行了下面的方法。困惑！
*/
try{
//此交易用于药店查询自己的订单
appCallServer($http,"S007",{
"billid":billid
 },
function(data){
console.log("queryData_Sunny1989:");
//success function
console.log(data);
instance.data = data;
instance.billid = billid;
instance.queryData = data;
//$cookieStore.put("data_SHQ",data);
},function(data){
alert("未找到记录:"+data.errtext);
 });
  }catch(error){
  alert("S007:"+error.message);
  }finally{
//脏值检查，无效果
//$scope.$apply();
}
  };

doSearch();	//查询收货人基本信息
var modalInstance = $modal.open({	// 开始执行控制器BillDtlPopCtrl
templateUrl: 'billDtlContent.html',	// 模态窗口的地址，指向创建的视图
controller: 'BillDtlPopCtrl',	// 初始化模态范围,为$modal指定的控制器，初始化$scope，该控制器可用$modalInstance注入
size: size,
resolve: {	// 定义一个成员并将他传递给$modal指定的控制器，相当于routes的一个reslove属性，如果需要传递一个objec对象，需要使用angular.copy()
items: function () {
     return $scope.items;
    }
}
});

doSearch()方法体如下:

var doSearch = function(){
console.log("doSearching...");
/**
* 此处存在问题，在输出"doSearching..."后，直接进入BillDtlPopCtrl中，在执行完其中的方法后才执行了下面的方法。困惑！
*/
try{
//此交易用于药店查询自己的订单
appCallServer($http,"S007",{
"billid":billid
 },
function(data){
console.log("queryData_Sunny1989:");
//success function
console.log(data);
instance.data = data;
instance.billid = billid;
instance.queryData = data;
//$cookieStore.put("data_SHQ",data);
},function(data){
alert("未找到记录:"+data.errtext);
 });
  }catch(error){
  alert("S007:"+error.message);
  }finally{
//脏值检查，无效果
//$scope.$apply();
}
  };

调试

经过对比查看调试信息，发现只有药品信息存在上一次缓存的现象。

另外，将一个search方法写在模态框打开之前，只执行了search方法中的一句输出，后面就接着执行控制器中的方法了？待控制器中的方法执行结束后才继续执行search中的剩余语句，搞不懂啊。

疑惑

难道是异步捣的鬼？(尚未得到解决)

功德圆满

经过网友的一番指教，自己最终将问题解决了。解决方案如下:

将模态弹出框置于doSearch方法体的成功回调内。正确的逻辑思路应是:在药店订单查询S007执行成功后，回调执行模态框弹出。自己的思路还是太窄了，这个点自己怎么就没有想到呢？还是缺少历练。

  var doSearch = function(){
 
  console.log("doSearching...");
  /**
   * 此处存在问题，在输出"doSearching..."后，直接进入BillDtlPopCtrl中，在执行完其中的方法后才执行了下面的方法。困惑！
   */
  try{
  //此交易用于药店查询自己的订单
  appCallServer($http,"S007",{
  "billid":billid
  },
  function(data){
  console.log("queryData_Sunny1989:");
  //success function
  console.log(data);
  instance.data = data;
  instance.billid = billid;
  instance.queryData = data;
//  $cookieStore.put("data_SHQ",data);
  
    var modalInstance = $modal.open({	// 开始执行控制器BillDtlPopCtrl
      templateUrl: 'billDtlContent.html',	// 模态窗口的地址，指向创建的视图
      controller: 'BillDtlPopCtrl',	// 初始化模态范围,为$modal指定的控制器，初始化$scope，该控制器可用$modalInstance注入
//      size: size,
      resolve: {	// 定义一个成员并将他传递给$modal指定的控制器，相当于routes的一个reslove属性，如果需要传递一个objec对象，需要使用angular.copy()
        items: function () {
          return $scope.items;
        }
      }
    });
    
    modalInstance.result.then(function (selectedItem) {
      $scope.selected = selectedItem;
    }, function () {
      $log.info('Modal dismissed at: ' + new Date());
    });	  
  
  },function(data){
  alert("未找到记录:"+data.errtext);
  });
  
  }catch(error){
  alert("S007:"+error.message);
  }finally{
//脏值检查，无效果
//$scope.$apply();
}
  };