Using Bootstrap Modal in Single Page AngularJS app

Question

I have a single page app in AungarJS made using ui.router and I want to integrate Bootstrap Modals in my app from this link:

http://angular-ui.github.io/bootstrap/#/getting_started

But so far my integration has failed severely. That's because the link says that in case of UI Routers I need to $uibResolve.setResolver('$resolve') in configuration. But using $uibResolve gives injection error.

My question: how can I integrate Bootsrap Modals in aforementioned link in my single page app?

Are you using a pre-1.0 ui-router version? "If one wants to have the modal resolve using UI Router's pre-1.0 resolve mechanism, one can call $uibResolve.setResolver('$resolve') in the configuration phase of the application" — ed'
– ed', Commented Jul 22, 2016 at 11:54
I don't know, but if I had to guess, you just wouldn't need to do that step. Probably works out of the box — ed'
– ed', Commented Jul 22, 2016 at 11:58
that's the thing.. im not doing that step and its still not working — Tahreem Iqbal
– Tahreem Iqbal, Commented Jul 22, 2016 at 12:05

atn · Accepted Answer · 2016-08-13 13:24:43Z

1

You should inject $uibResolveProvider and call $uibResolveProvider.setResolver('$resolve')

https://docs.angularjs.org/guide/providers

** the service object is not available during the config phase, but the provider instance is (see the unicornLauncherProvider example above).

answered Aug 13, 2016 at 13:24

atn

9149 silver badges17 bronze badges

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

Comments

Bennett Adams · Accepted Answer · 2016-08-13 15:00:38Z

Short answer: Configure this using the onEnter property of the state config to open a modal when you transition to that state.

It's not clear from your question which versions of angular, ui-bootstrap, and ui-router you are using, but I have created a snippet to demonstrate. It should be adaptable to your situation, unless you are using much older versions of each.

var app = angular.module('uiRouterModal', ['ui.router', 'ui.bootstrap']);

app.config(function($stateProvider, $urlRouterProvider){
  $urlRouterProvider.otherwise("/");
  $stateProvider
  .state('index', {
    url: '/',
    template: '<h2>Base state</h2>'
  })
  .state('modal', {
    url: '/modal',
    onEnter: ['$stateParams', '$state', '$uibModal', function($stateParams, $state, $uibModal) {
      $uibModal.open({
        template: [
        '<div class="modal-content">',
          '<div class="modal-header">',
            '<h3 class="modal-title">Modal state</h3>',
          '</div>',
          '<div class="modal-body">',
          'I did it!',
          '</div>',
          '<div class="modal-footer">',
            '<button class="btn btn-primary" ng-click="dismiss()">OK</button>',
          '</div>',
        '</div>'
        ].join(''),
        resolve: {}, // can resolve any data and pass to controller 
        controller: function($uibModalInstance, $scope){
          $scope.dismiss = function() {
            $uibModalInstance.dismiss();
          };
        }
      });
    }]
  });
});

<!DOCTYPE html>
<html ng-app="uiRouterModal">

  <head>
    <meta charset="utf-8" />
    <title>UI-Router and UI-Bootstrap Modal</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="[email protected]" data-semver="1.4.8" src="https://code.angularjs.org/1.4.8/angular.js"></script>
    <script data-require="[email protected]" data-semver="0.3.1" src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.3.1/angular-ui-router.js"></script>
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.1.0/ui-bootstrap-tpls.js"></script>
    <script src="script.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
  </head>

  <body>
    <ui-view></ui-view>
    <a ui-sref="modal">Click for modal</a>
  </body>

</html>

Collectives™ on Stack Overflow

Using Bootstrap Modal in Single Page AngularJS app

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related