无法使用 angular 和 ui.routes 打开模态答案

【问题标题】：unable to open a modal with angular and ui.routes无法使用 angular 和 ui.routes 打开模态
【发布时间】：2014-11-06 20:47:34
【问题描述】：

我正在尝试关注this example 以在某个状态下显示引导模式。没有模态它可以正常工作（所以状态配置应该没问题）。所有需要的依赖项（即角度引导程序）都应该可用。

当我在$modal.open 之前执行console.debug($stateParams) 时，我在$modal.open 方法中得到了正确的数据，但是返回了最后一个状态的 stateParams（我来自的状态）

有什么提示吗？

编辑

相关状态cfg：

.state('publications.view', {
    parent: 'publications.productSelection',
    url: '/{productSlug:[a-zA-Z0-9-]+}/{docID:[0-9]+}_{slug:[a-zA-Z0-9-]+}',
    onEnter: ['restFactory', '$state', '$stateParams', '$modal',
        function(restFactory, $state, $stateParams, $modal) {
            console.debug($stateParams.docID);
            $modal.open({

                templateUrl: 'partials/publication.html',
                resolve: {
                    publication: ['restFactory', '$stateParams',
                        function(restFactory, $stateParams) {
                            console.debug($state.params);
                            console.debug($stateParams);
                            return restFactory.view($stateParams.language, $stateParams.productSlug, $stateParams.docID);
                        }
                    ]
                },
                controller: ['$scope', '$sce', 'publication', '$rootScope',
                    function($scope, $sce, publication, $rootScope) {
                        $rootScope.pageTitle = publication.data.data.publication.Publication.title;
                        $scope.publication = $sce.trustAsHtml(publication.data.data.publication.Publication.content);
                    }
                ]
            });
        }
    ]
});

【问题讨论】：

一些示例代码怎么样？
控制台有错误吗？
nope .. 好吧，再想一想.. 解析路径缺少 stateParams 中应该检索的 ID，因此服务器返回错误，但没有 JS 错误或其他东西。一切看起来都不错——只是 modal.open 范围内的 stateParams 没有更新

标签： angularjs angular-ui-bootstrap angular-ui-router

【解决方案1】：

您可以通过将当前的 $stateParams 注入到 onEnter 函数中来解决此问题，将它们保存为某个服务中的状态，然后将该服务注入到您的模态解析中。

我正在修改这里的代码：Using ui-router with Bootstrap-ui modal

.provider('modalState', function($stateProvider) {
    var modalState = {
        stateParams: {},
    };

    this.$get = function() {
        return modalState;
    };

    this.state = function(stateName, options) {
        var modalInstance;
        $stateProvider.state(stateName, {
            url: options.url,
            onEnter: function($modal, $state, $stateParams) {
                modalState.stateParams = $stateParams;
                modalInstance = $modal.open(options);
                modalInstance.result['finally'](function() {
                    modalInstance = null;
                    if ($state.$current.name === stateName) {
                        $state.go('^');
                    }
                });
            },
            onExit: function() {
                if (modalInstance) {
                    modalInstance.close();
                }
            }
        });
    };
})

然后在您的应用配置部分中

.config(function($stateProvider, $urlRouterProvider, modalStateProvider) {
    modalStateProvider.state('parent.child', {
        url: '/{id:[0-9]+}',
        templateUrl: 'views/child.html',
        controller: 'ChildCtrl',
        resolve: {
            role: function(Resource, modalState) {
                return Resource.get({id: modalState.stateParams.id}).$promise.then(function(data) {
                    return data;
                });
            }
        }
    });
}

【讨论】：