网站开发进阶(二十一)Angular项目信息错位显示问题解决
【摘要】 Angular项目信息错位显示问题解决
绪
最近在项目开发过程中遇到这样一个棘手的问题:查询出所有订单信息后，点击选择某一个订单，查询出的结果是上一次查询所得的结果。而且会出现点击两次才可以显示订单详情的问题。
通过Chrome进行代码调试，发现事件执行次序与自己的点击事件次序存在不一致的情况。
相关代码:
doSearch(); //查询收货人基本信息var...
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
【版权声明】本文为华为云社区用户转载文章，如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）