Geek Answers Handbook

Failed to open boot modal window as a route

I use bootstrap to display modality and want it to appear when I click on an anchor tag as a route. But I get a module error and cannot figure out how to solve 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

+5
javascript angularjs
source share
2 answers

The demo is suffering from problems. You have not included angular -route.js. You did not specify the default path using otherwise , and you placed the html inside 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 encounter problems declaring the same ng-controller in the markup as in the route configuration ... select one or the other

+8
source share

Your plunter has no ngRoute dependency. In newer versions of angular, ngRoute is a separate library that must be included separately and declared as a module dependency on your application module:

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.4/angular.js"></script> <script src="http://code.angularjs.org/1.2.4/angular-route.js"></script> 
 var app = angular.module('plunker', ['ngRoute', 'ui.bootstrap']);

In addition, your routes are not fully defined.

In addition, your templates ( <script type="text/ng-template"> ) are defined inside the <div ng-view> element. ng-view is a directive that replaces the contents of a node's div element when resolving a route, so the best place for your templates is outside the ng-view element.

Fixed plunker

 var app = angular.module('plunker', ['ngRoute', 'ui.bootstrap']); app.config(function($routeProvider) { $routeProvider .when('/profile', { templateUrl : 'modalContainer', controller : 'ProfileModalCtrl' }) .when('/detail', { templateUrl : 'detail.html', controller : 'DetailPageCtrl' }) .otherwise({redirectTo: '/detail'}); }); app.controller('DetailPageCtrl', function($scope) { console.log("detail page"); }); app.controller('ProfileModalCtrl', function($scope, $modal) { $modal.open({templateUrl : 'modal.html'}); }); 
 <!doctype html> <html ng-app="plunker"> <head> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.4/angular.js"></script> <script src="http://code.angularjs.org/1.2.4/angular-route.js"></script> <script src="http://angular-ui.github.com/bootstrap/ui-bootstrap-tpls-0.7.0.js"></script> <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet"> </head> <body> <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 ng-view></div> </body> <script src="script.js"></script> </html>
+1
source share

More articles:


All Articles