Question

我在项目中使用angular-ui-router和angular-bootstrap。

我想实现以下用例：

当用户点击“编辑”按钮时，UI-Router更改URL并打开模态窗口。当我通过点击浏览器的后退按钮返回时，模态窗口正在关闭。

如果用户在打开模态窗口时重新加载页面，应用程序应在主ui-view容器中呈现模态窗口内容。

您可以在此父亲身上看到此用例：http://canopy.co/（尝试点击项目并重新加载页面）

问题：如何实现上述行为？

这是我的jsFiddle http://jsfiddle.net/sloot/ceWqw/3/

var app = angular.module('myApp', ['ui.router', 'ui.bootstrap'])
.config(function ($stateProvider, $urlRouterProvider) {

  $urlRouterProvider.otherwise('/');
  $stateProvider
    .state('app', {
      url: '/',
      controller: 'AppCtrl',
      templateUrl: '/views/app.html'
    })
    .state('item', {
      url: '/profile',
      controller: 'ItemCtrl',
      templateUrl: '/views/item.html'
    });
})
.controller('AppCtrl', function($scope, $modal, $state){
  $scope.open = function(){

    // open modal whithout changing url
    $modal.open({
      templateUrl: '/views/item.html'
    });

    // I need to open popup via $state.go or something like this
  };
})
.controller('ItemCtrl', function(){});

Answer 1

ui-router常见问题解答中有一个很好的例子。关键是使用onEnter参数。

https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions#how-to-open-a-dialogmodal-at-a-certain-state

以下是使用ui-bootstrap的$ modal服务执行此操作的示例。此示例仅指定onEnter函数。没有模板，控制器等。所以基本上显示模态，然后当它关闭时它返回到项状态。您仍然负责处理模式关闭时应用转换到的状态。

$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.finally(function() {
            $state.go('^');
        });
    }
});

Answer 2

这是UI-Router的Github上的一个问题，描述了你要做的事情：

State transitions similar to Pinterest's overlay

您可以在此reply中查看实施情况。请注意，虽然他们实现所需效果的方式已在最新版本中进行了修补，但他们正在使用旧版本的UI-Router来维护功能。

URL上的Angular UI-Router打开模态窗口更改

2 个答案: