在AngularJS定制URL模式窗口 [英] Modal window with custom URL in AngularJS

问题描述

我需要显示一个模式窗口在我的角度应用程序（基本上只是将与编译模板加载的隐藏分区）。问题是，我需要的URL时，模态打开，以便用户可以复制该链接并直接转到模式窗口，也可以使用后退按钮以关闭模式窗口，并返回到previous页面改变。这类似于当你点击一个引脚上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.

到目前为止，我已经创建了一个加载模板，使用$编译编译，注入了$范围，然后显示编译模板的指令。这工作得很好。

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.

问题，只要我使用$位置改变路径，路由控制器火灾是并加载模板到NG-视图。

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

我想到了克服这种的2种方式，但一直没能够执行：

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

1. 不知怎的，prevent从当我使用$位置更改URL烧制路由控制器。我添加了一个监听器$ routeChangeStart至prevent情况发生的默认，但似乎并没有工作。

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-观点指令），并有各自能够处理不同的路线。看不到角此刻虽然表示支持。

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_ID而不是/项目？ITEM_ID = 12345。

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

任何帮助将是AP preciated。

Any help would be appreciated.

推荐答案

您现在可以做，如果你使用的是这里所描述的ui.router模块：<一href=\"https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions#how-to-open-a-dialogmodal-at-a-certain-state\">https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions#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功能给当时的（）函数pressing逃逸或点击后台处理模式被解雇。

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屋！