AngularJS, AngularUi (Bootstrap) and NgRoute

Im using AngularJS 1.4.1, ngRoute 1.4.1 and https://angular-ui.imtqy.com/bootstrap/

Base structure

<html ng-app="myApp"> <base href="/"> <body> <div ng-view></div> </body> </html> 

and I use ngRoute to load every page of my site, for example, about us, contact us, etc. in a div with ng view.

When a page loads into ng view with

 var myApp = angular.module('myApp', ['ngRoute', 'ngProgress', 'ui.bootstrap']); myApp.config(function($routeProvider,$locationProvider){$routeProvider .when('/about',{templateUrl:'about.php',controller:'mainController'}) .otherwise({redirectTo:'/'}); staffPanelApp.controller('mainController', function($scope, $route, $routeParams, $location, $templateCache, ngProgress) { $templateCache.removeAll(); ngProgress.start(); $scope.$route = $route; $scope.$location = $location; $scope.$routeParams = $routeParams; ngProgress.complete(); }); 

A ui bootstrap function, such as a warning, should work, but it does not work in ngview, it only works when I add it to the main base page. Is there a way to make it work on a loaded ngView page?

Example Bootstrap UI Function:

 <alert type="success">This should work</alert> 

Update: Plunker, but could not get ngroute to work, but the database exists: http://plnkr.co/edit/Njg16e01Ocv1iC1qzn7A?p=preview

+5
source share
1 answer

Maybe because you are creating a controller on 'staffPanelApp', but your ngApp is called myApp?

0
source

All Articles