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

举报
SHQ5785 发表于 2022/12/05 10:22:48 2022/12/05
【摘要】 ​绪最近在项目开发过程中遇到这样一个棘手的问题:查询出所有订单信息后，点击选择某一个订单，查询出的结果是上一次查询所得的结果。而且会出现点击两次才可以显示订单详情的问题。通过Chrome进行代码调试，发现事件执行次序与自己的点击事件次序存在不一致的情况。相关代码:doSearch(); //查询收货人基本信息var modalInstance = $modal.open({ // 开始执行控...

​绪

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

通过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();
}
  };
【版权声明】本文为华为云社区用户原创内容，未经允许不得转载，如需转载请自行联系原作者进行授权。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱： cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论（0）

0/1000
抱歉，系统识别当前为高风险访问，暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称，即可参与社区互动！

*长度不超过10个汉字或20个英文字符，设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符，设置后3个月内不可修改。

确认 取消

加入云驻计划，成为创作者

  • 华为云周边好礼
  • 免费体验产品
  • 特殊身份标识
  • 线下官方门票
  • 内部专家零距离
  • 与10000+优质创作者共同成长
立即加入