AngularJS 中带有自定义 URL 的模态窗口 [英] Modal window with custom URL in AngularJS

问题描述

我需要在我的 Angular 应用程序中显示一个模态窗口(基本上只是一个将使用编译模板加载的隐藏 div).问题是，我需要在模态打开时更改 URL，以便用户可以复制链接并直接转到模态窗口，还可以使用后退按钮关闭模态窗口并返回上一页.这类似于 Pinterest 在您点击图钉时处理模态窗口的方式.

I need to display a modal window (basically just a hidden div that will be loaded with a compiled template) in my Angular app. The problem is, I need the URL to change when the modal opens so users can copy the link and go directly to the modal window and also use the back button to close the modal window and return to the previous page. This is similar to the way Pinterest handles modal windows when you click on a pin.

到目前为止，我已经创建了一个指令来加载模板，使用 $compile 编译它，注入 $scope，然后显示编译的模板.这工作正常.

So far I've created a directive that loads the template, compiles it using $compile, injects the $scope and then displays the compiled template. This works fine.

问题是一旦我使用 $location 更改路径，路由控制器就会触发并将模板加载到 ng-view 中.

The problem is as soon as I use $location to change the path, the route controller fires and loads the template into ng-view.

我想了两种方法来解决这个问题，但都没有实现:

I thought of 2 ways of overcoming this, but have not been able to implement either:

1. 当我使用 $location 更改 url 时，以某种方式阻止路由控制器触发.我已经向 $routeChangeStart 添加了一个侦听器以防止默认情况发生，但这似乎不起作用.

1. Somehow prevent the route controller from firing when I change the url using $location. I've added a listener to $routeChangeStart to prevent the default from happening, but that does not seem to work.

以某种方式向页面添加另一个视图处理程序(页面上基本上有 2 个命名的 ng-view 指令)并且每个都能够处理不同的路由.不过目前看不到 Angular 支持这一点.

Somehow add another view handler to the page (basically have 2 named ng-view directives on the page) and have each able to handle different routes. Can't see that Angular supports this at the moment though.

URL 的格式需要为/item/item_id 而不是/item?item_id=12345.

The URL needs to be of the format /item/item_id and not /item?item_id=12345.

任何帮助将不胜感激.

推荐答案

如果你使用 ui.router 模块，你现在可以这样做:https://github.com/angular-ui/ui-router/wiki/常见问题#how-to-open-a-dialogmodal-at-a-certain-state.

You can now do this if you use the ui.router module as described here: https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions#how-to-open-a-dialogmodal-at-a-certain-state.

他们的例子:

$stateProvider.state("items.add", {
    url: "/add",
    onEnter: function($stateParams, $state, $modal, $resource) {
        $modal.open({
            templateUrl: "items/add",
            resolve: {
              item: function() { new Item(123).get(); }
            },
            controller: ['$scope', 'item', function($scope, item) {
                $scope.dismiss = function() {
                    $scope.$dismiss();
                };

                $scope.save = function() {
                    item.update().then(function() {
                        $scope.$close(true);
                    });
                };
            }]
        }).result.then(function(result) {
            if (result) {
                return $state.transitionTo("items");
            }
        });
    }
});

我还将errorCallback"函数传递给 then() 函数，以通过按 Escape 或单击背景来处理模态解除.

I also pass an 'errorCallback' function to the then() function to handle modal dismissal by pressing Escape or clicking on the background.

这篇关于AngularJS 中带有自定义 URL 的模态窗口的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！