对AngularJs初学者来说,有了Angular6的经验,直接上手项目时,有的用法还是不太清晰:
之前我在AngularJs做导航之间的路由跳转的时候,都没有接触过跨一级导航跳转的情况,所以没有接触过需要刷新二级导航列表的情况,今天遇到时候,发现使用之前传统的$state.go()方法没有对二级导航的列表做处理,结果就是一级导航跳转过去了,二级导航栏还是维持原有的列表——
原本的代码:
$scope.transforOut = function (item) {
getDetail(item).then(function (data) {
if (!data) {
return;
} else {
var detailVOList = [];
angular.forEach(data.detailList, function (item) {
detailVOList.push({
materialsNo: item.materialNo,
materialsDes: item.materialName,
unit: item.unit,
enableNum: item.enableNum,
amount: item.realAmount,
})
});
$state.go("app.stock.allocation", {
canKaoObj: {
threeReverseId: item.id,
warehouseCode: item.warehouseCode,
inArea: item.inArea,
unit: item.unit,
enableNum: item.enableNum,
realAmount: item.realAmount,
threeReverseType: "1",
detailVOList: detailVOList,
}
})
}
});
};
上面我们可以看出,我使用了$state.go("app.stock.allocation",......)方法,从sale这个一级导航跳转到stock一级导航。
这种方法在没有跨越一级路由的时候是适用的,但是跨越之后,就会出现问题了,那么如何解决呢?
解决方法:
我们可以使用引入EventBus的方法 ,直接发布这个事件,在app.js 页面会订阅这个事件,然后跳转路由的时候,就会调用app.js中的改变一级路由的方法了,我们看看上面的代码可以怎么修改:
$scope.transforOut = function (item) {
getDetail(item).then(function (data) {
if (!data) {
return;
} else {
var detailVOList = [];
angular.forEach(data.detailList, function (item) {
detailVOList.push({
materialsNo: item.materialNo,
materialsDes: item.materialName,
unit: item.unit,
enableNum: item.enableNum,
amount: item.realAmount,
})
});
// $state.go("app.stock.allocation", {
// canKaoObj: {
// threeReverseId: item.id,
// warehouseCode: item.warehouseCode,
// inArea: item.inArea,
// unit: item.unit,
// enableNum: item.enableNum,
// realAmount: item.realAmount,
// threeReverseType: "1",
// detailVOList: detailVOList,
// }
// })
EventBus.Publish('go2otherMenuPage', {
name: "app.stock.allocation",
params: {
canKaoObj: {
threeReverseId: item.id,
warehouseCode: item.warehouseCode,
inArea: item.inArea,
unit: item.unit,
enableNum: item.enableNum,
realAmount: item.realAmount,
threeReverseType: "1",
detailVOList: detailVOList,
}
}
});
}
});
};
在app.js中,我们就能接收到一级导航的改变状态,刷新对应出二级导航的列表。