在URL变化角UI的路由器上打开模式窗口 [英] Angular UI-Router open modal window on url change

问题描述

我用角UI路由器和角度引导在我的项目。

我要实现如下用例：

当用户点击编辑按钮，用户界面​​，路由器改变URL和开放的模态窗口。当我回去通过点击浏览器的后退按钮，模式窗口正在关闭。

如果在打开模式窗口，用户重载页面，应用程序应该呈现主UI-View容器模式窗口的内容。

这用情况下，你可以在此看到陛下： http://canopy.co/ （试着点击项目，并重新加载页面）

问：如何实现上述行为

下面是我的jsfiddle http://jsfiddle.net/sloot/ceWqw/3/

  VAR应用= angular.module（'对myApp'，['ui.router'，'ui.bootstrap']）
的.config（函数（$ stateProvider，$ urlRouterProvider）{  $ urlRouterProvider.otherwise（'/'）;
  $ stateProvider
    .STATE（'应用'，{
      网址：'/'，
      控制器：'AppCtrl'，
      templateUrl：/views/app.html
    }）
    .STATE（'项目'，{
      网址：'/个人资料，
      控制器：'ItemCtrl'，
      templateUrl：/views/item.html
    }）;
}）
.controller（'AppCtrl'，函数（$范围，$模式，$州）{
  $ scope.open =功能（）{    //开放模式改变内部消除网址
    $ modal.open（{
      templateUrl：/views/item.html
    }）;    //我需要通过$ state.go或像这样打开弹出
  };
}）
.controller（'ItemCtrl'，函数（）{}）;
 

解决方案

有这里的UI路由器常见问题一个很好的例子。关键是使用的OnEnter参数。

<一个href=\"https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions#how-to-open-a-dialogmodal-at-a-certain-state\" rel=\"nofollow\">https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions#how-to-open-a-dialogmodal-at-a-certain-state

  

下面是使用的UI引导的模式$服务做到这一点的例子。这个例子只指定了一个函数的OnEnter。没有模板，控制器等，所以基本上示出了模态，那么当其关闭它返回到物品的状态。你还在负责处理什么状态你的应用程序过渡到时态关闭。

  $ stateProvider.state（items.add，{
    网址：/添加
    的OnEnter：函数（$ stateParams，$状态，$模式，$资源）{
        $ modal.open（{
            templateUrl：项目/加，
            解析：{
              项目：功能（）{新的项目（123）获得（）; }
            }，
            控制器：['$范围'，'项目'，函数（$范围，项目）{
              $ scope.dismiss =功能（）{
                $ $范围解雇（）。
              };              $ scope.save =功能（）{
                item.update（）。然后（函数（）{
                  。$ $范围接近（真）;
                }）;
              };
            }]
        }）效果。最后。（函数（）{
            $ state.go（'^'）;
        }）;
    }
}）;
 

I use angular-ui-router and angular-bootstrap in my project.

I want to implement follow use case:

When user click to "edit" button, UI-Router change URL and open modal window. When I go back by click on browser's back button, modal window is closing.

If user reload page when modal window is opened, application should render modal window content in main ui-view container.

This use case you can see on this sire: http://canopy.co/ (try to click on item and reload page)

Question: How to implement behaviour described above?

Here is my 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(){});

解决方案

There is a great example here on the ui-router FAQs. The key is using the onEnter param.

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

Here's an example of to do it using ui-bootstrap's $modal service. This example only specifies an onEnter function. There is no template, controller, etc. So essentially the modal is shown, then when its closed it returns to the items state. You are still responsible for handling what state your app transitions to when the modal closes.

$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('^');
        });
    }
});

这篇关于在URL变化角UI的路由器上打开模式窗口的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！