24

我在我的项目中使用 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(){});
4

2 回答 2

19

ui-router FAQs 上有一个很好的例子。关键是使用 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('^');
        });
    }
});
于 2014-04-13T16:48:40.687 回答
0

这是 UI-Router 的 Github 上的一个问题，描述了您要执行的操作：

类似于 Pinterest 的覆盖的状态转换

您可以在此回复中看到实现。请注意，尽管他们实现您想要的效果的方式已在最新版本中进行了修补，并且他们正在使用旧版本的 UI-Router 来维护功能。

于 2014-02-08T23:36:39.463 回答