Question

92

Unable to open bootstrap modal window as a route

rated 0 times [ 96] [ 4] / answers: 1 / hits: 12432 / 11 Years ago, sat, december 14, 2013, 12:00:00

I'm using bootstrap to display a modal and want it to be shown on click of a anchor tag as a route.
But i'm getting a module error & can't seem to figure out how to resolve it.

HTML

<div ng-view>

    <div ng-controller=DetailPageCtrl>

      <a href=#/profile>Click here to open modal!</a>

    </div>

    <script type=text/ng-template id=modalContainer>

        <div ng-controller=ProfileModalCtrl></div>

    </script>

</div>

JS

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

app.config(function($routeProvider) {

   $routeProvider

      .when('/profile', {

          templateUrl : 'modalContainer',

          controller : 'ProfileModalCtrl'

      });

})

app.controller('DetailPageCtrl', function($scope) {

   console.log(detail page);

});

app.controller('ProfileModalCtrl', function($scope, $modal) {

    $modal.open({templateUrl : 'modal.html'});

});

Code in plnkr :
http://plnkr.co/edit/VbvuWzLqkICFzBYI9sL5?p=preview

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

loric

Add To Favorites

Follow

Total Points: 110

Total Questions: 96

Total Answers: 91

Location: Estonia

Member since Wed, Jun 8, 2022

2 Years ago

loric questions

1 Vue 3 reactivity not triggered from inside a class instance

Tue, Jun 8, 21, 00:00, 3 Years ago

1 Differentiate 2 routes of a controller (NestJS)

Mon, Nov 16, 20, 00:00, 4 Years ago

1 React Material UI OutlinedInput does not display error message

Tue, Jun 30, 20, 00:00, 4 Years ago

1 Is there a way to control where a nested Material UI select in a popper gets mounted in the DOM?

Thu, Apr 30, 20, 00:00, 4 Years ago

1 Is there a way to accept only alphabets as input and not numbers? If numbers are given it should show a validation error as it takes only alphabets

Mon, Nov 4, 19, 00:00, 5 Years ago

View All

answered 11 Years ago eliezerc · Accepted Answer

Demo is plagued with problems. You haven't included angular-route.js. You didn't provide a default path using otherwise and you placed html within ng-view

/* include script tag with `angular-route.js , then inject as dependency*/

var app = angular.module('plunker', ['ui.bootstrap', 'ngRoute']);

app.config(function($routeProvider) {

  $routeProvider.when('/', {

    templateUrl: 'default'

  })

    .when('/profile', {

      templateUrl: 'modalContainer',

      controller: 'ProfileModalCtrl'

    }).otherwise({

      redirectTo: '/'

    })

});

<div ng-view><!-- leave empty --></div>

DEMO

You will also run into problems declaring same ng-controller in markup as in route config...pick one or the other