Angular UI-Router open modal window on url change

Question

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

Alexander Vasilyev · Accepted Answer · 2015-07-07 12:34:50Z

19

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

edited Jul 7, 2015 at 12:34

Alexander Vasilyev

1,3132 gold badges15 silver badges23 bronze badges

answered Apr 13, 2014 at 16:48

ofairfoul

3102 silver badges5 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Episodex Over a year ago

This works great, but I see one issue. When I click somewhere on dark overlay around the $modal it closes itself, but it doesn't generate any event so state remains the same. Any idea how to fix this?

Episodex Over a year ago

Found answer by myself. You should add second function callback in then (separate callbacks by comma). This second function will launch on dismiss and also when modal is closed by hitting Esc or clicking overlay.

Alexander Vasilyev Over a year ago

BTW, it was updated to use finally instead of then in the FAQ you linked.

Cuong Vo · Accepted Answer · 2014-02-08 23:36:39Z

0

Here's an issue on UI-Router's Github describing what you're trying to do:

State transitions similar to Pinterest's overlay

You can see the implementation in this reply. Note though the way they were achieving the effect you want has been patched in the latest version and they're using an older version of UI-Router to maintain the functionality.

answered Feb 8, 2014 at 23:36

Cuong Vo

4,5924 gold badges25 silver badges12 bronze badges

1 Comment

Anton Rodin Over a year ago

When I use 'preventDefault' function for '$stateChangeStart' event, ui-router doesn't change url. Do you know solution for change url and prevent view rendering?

Collectives™ on Stack Overflow

Angular UI-Router open modal window on url change

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related