angulaire.js - angulairejs utilise modal pour sélectionner la liste li en modal puis transmettre la valeur

Question

Comme le montre l'image ci-dessus, je souhaite créer l'effet de ce type d'interface. Sauf pour la sélection de la nourriture pour chat, les valeurs dans la liste de sélection sauteront sur celle-ci de manière asynchrone. page car le modal dans ui-bs est utilisé

.

Actuellement, je pense à deux manières : 1. Après la sélection, modifiez les paramètres de routage correspondants et faites une autre requête $http
2. Accédez directement à la page de routage paramètres correspondante
Mais si la deuxième méthode est utilisé ici, si vous sélectionnez la page plusieurs fois, il sera très difficile de cliquer sur le bouton de retour à la fin
Pourriez-vous s'il vous plaît me dire comment faire cela ?

        // 资产选择模态框
        $scope.items = [
            {assetName: '全部理财', 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: '发财喵', type: '8', holdType: '1', redeemType: '1'},
            {assetName: '猫粮', type: '3', holdType: '7', redeemType: '7'}
        ];
        $scope.openModal = function (size) {
            var triangle = jQuery('.triangle');
            //这里很关键,是打开模态框的过程
            var modalInstance = $uibModal.open({
                templateUrl: 'myModalContent.html',//模态框的页面内容,这里的url是可以自己定义的,也就意味着什么都可以写
                controller: 'ModalInstanceCtrl',//这是模态框的控制器,是用来控制模态框的
                size: size,//模态框的大小尺寸
                resolve: {//这是一个入参,这个很重要,它可以把主控制器中的参数传到模态框控制器中
                    items: function () {//items是一个回调函数
                        return $scope.items;//这个值会被模态框的控制器获取到
                    }
                }
            });
            modalInstance.opened.then(function () {
                triangle.css({transform: 'rotate(270deg)'})
            });
            modalInstance.result.then(function (selectedItem) {//这是一个接收模态框返回值的函数
                // $scope.selected = selectedItem;//模态框的返回值
                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) {
        //这是模态框的控制器,记住$uibModalInstance这个是用来调用函数将模态框内的数据传到外层控制器中的,items则上面所说的入参函数,它可以获取到外层主控制器的参数
        $scope.items = items;//这里就可以去外层主控制器的数据了
        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也是在模态框关闭的时候进行调用,而它返回的是一个reason
            $uibModalInstance.dismiss('cancel');
            triangle.css({transform: 'rotate(360deg)'})
        };
    })

Celui sans contrôleur ci-dessus est l'animation modale ouverte et les données de la page actuelle
Ce qui suit est le contrôleur modal

Answer 1

Méthode 2+location.path().replace