問(wèn)題描述

如上圖 我想做一個(gè)這種界面的效果 選中列表中的值 除了選中貓糧是跳轉(zhuǎn)，其他的選項(xiàng)均在本頁(yè)面異步刷新相應(yīng)的數(shù)據(jù)，因?yàn)槭褂昧藆i-bs里面的modal

目前想的是兩種方式：1.選中后改變相應(yīng)的路由參數(shù) 再次$http請(qǐng)求2.直接跳轉(zhuǎn)到相應(yīng)的路由+參數(shù)的頁(yè)面 但是第2種如果在本頁(yè)面多次選擇的話 到最后點(diǎn)擊返回按鈕就很麻煩請(qǐng)教一下這個(gè)應(yīng)該怎么做？

// 資產(chǎn)選擇模態(tài)框$scope.items = [ {assetName: ’全部理財(cái)’, type: ’0’, holdType: ’0’, redeemType: ’0’}, {assetName: ’活期貓’, type: ’7’, holdType: ’4’, redeemType: ’4’}, {assetName: ’月月漲’, type: ’1’, holdType: ’5’, redeemType: ’5’}, {assetName: ’季度喵’, type: ’4’, holdType: ’3’, redeemType: ’3’}, {assetName: ’半年喵’, type: ’5’, holdType: ’6’, redeemType: ’6’}, {assetName: ’九九喵’, type: ’6’, holdType: ’9’, redeemType: ’9’}, {assetName: ’年豐收’, type: ’2’, holdType: ’12’, redeemType: ’12’}, {assetName: ’發(fā)財(cái)喵’, type: ’8’, holdType: ’1’, redeemType: ’1’}, {assetName: ’貓糧’, type: ’3’, holdType: ’7’, redeemType: ’7’}];$scope.openModal = function (size) { var triangle = jQuery(’.triangle’); //這里很關(guān)鍵,是打開(kāi)模態(tài)框的過(guò)程 var modalInstance = $uibModal.open({templateUrl: ’myModalContent.html’,//模態(tài)框的頁(yè)面內(nèi)容,這里的url是可以自己定義的,也就意味著什么都可以寫(xiě)controller: ’ModalInstanceCtrl’,//這是模態(tài)框的控制器,是用來(lái)控制模態(tài)框的size: size,//模態(tài)框的大小尺寸resolve: {//這是一個(gè)入?yún)?這個(gè)很重要,它可以把主控制器中的參數(shù)傳到模態(tài)框控制器中 items: function () {//items是一個(gè)回調(diào)函數(shù)return $scope.items;//這個(gè)值會(huì)被模態(tài)框的控制器獲取到 }} }); modalInstance.opened.then(function () {triangle.css({transform: ’rotate(270deg)’}) }); modalInstance.result.then(function (selectedItem) {//這是一個(gè)接收模態(tài)框返回值的函數(shù)// $scope.selected = selectedItem;//模態(tài)框的返回值console.log(selectedItem);console.log($scope.selected); }, function () {$log.info(’Modal dismissed at: ’ + new Date());triangle.css({transform: ’rotate(360deg)’}) });}; .controller(’ModalInstanceCtrl’, function ($scope,$http, $uibModalInstance,$location,items) {//這是模態(tài)框的控制器,記住$uibModalInstance這個(gè)是用來(lái)調(diào)用函數(shù)將模態(tài)框內(nèi)的數(shù)據(jù)傳到外層控制器中的,items則上面所說(shuō)的入?yún)⒑瘮?shù),它可以獲取到外層主控制器的參數(shù)$scope.items = items;//這里就可以去外層主控制器的數(shù)據(jù)了var triangle = jQuery(’.triangle’);$scope.selected = { item: $scope.items[0]};$scope.selasset = function (type,holdType,redeemType) { if(type == ’3’){$location.path(’/grain’) }else {// $location.path(’/asset/’+type+’/’+holdType+’/’+redeemType); } $uibModalInstance.close($scope.selected.item); // $uibModalInstance.close(); triangle.css({transform: ’rotate(360deg)’})};$scope.cancelModal = function () { //dismiss也是在模態(tài)框關(guān)閉的時(shí)候進(jìn)行調(diào)用,而它返回的是一個(gè)reason $uibModalInstance.dismiss(’cancel’); triangle.css({transform: ’rotate(360deg)’})}; })

上面沒(méi)有controller的是當(dāng)前頁(yè)面的open modal動(dòng)畫(huà)及數(shù)據(jù)下面是modal的controller

問(wèn)題解答

方法2+location.path().replace