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();
      }
        };
  
 

文章来源: shq5785.blog.csdn.net，作者：No Silver Bullet，版权归原作者所有，如需转载，请联系作者。

原文链接：shq5785.blog.csdn.net/article/details/50010789