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 functionconsole.log(data);instance.data = data;instance.billid = billid;instance.queryData = data;
//  $cookieStore.put("data_SHQ",data);var modalInstance = $modal.open({	// 开始执行控制器BillDtlPopCtrltemplateUrl: '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();
}};

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！