Following this plunker: http://plnkr.co/edit/33572YOSA2s89uEiLmKB?p=preview
I've managed to load into bootstrap modal partial content based on route:
Route defined as follows:
.when('/profile', {
templateUrl: 'modalContainer',
})
Controller hooked up:
myApp.controller('DashboardModal', function($scope, $modal) {
$modal.open({
templateUrl : 'Partials/Dashboard.html',
controller: 'DashboardController',
});
});
Finally in html:
<div>
Click here to open modal!
</div>
<script type="text/ng-template" id="modalContainer">
<div ng-controller="DashboardModal"></div>
</script>
My Problem is that the route of the opener window changes when modal opens.
The code is working exactly as designed. What the <a href="#/profile"> tag is doing is making a call to the $routeProvider with the path '/profile'. Looking in the script.js, you can see this is a new view which is set up to look like a modal in the HTML. You are navigating to a new view, not opening a modal.
Related
ui-router and ngRoute at the same time
I'm working on a quite large project that uses very old angularjs (version 1.4.3) along with ui-router (version 0.2.15). Updating to newer version at the moment it's not possible.
The app use simple state-routing.
What I succesfully tried to achieve was to open a modal (ui.bootstrap) with a sub-routing within.
First I tried to use ui-router only, but the ui-router do not recognize ui-view inside modal template so it not worked.
After that I tried to use ui-router for normal navigation only and ngRoute for managing the routing inside the modal and it worked.
My question is if the use of both ui-router and ngRoute could cause side-effects or other hard-to-detect issues.
Here is a Plunker with a my test app.
Plunker
angular.module('router_app', ['ui.router', 'ui.bootstrap', 'ngRoute'])
.config(function ($stateProvider, $routeProvider) {
$stateProvider
.state('my_state', {
url: '/my_state',
views: {
'my_view': {
templateUrl: '/templates/my_state.tpl',
controller: 'ctrl_my_state'
}
}
});
$routeProvider
.when("/my_state/my_modal", {
templateUrl: "/templates/my_modal.tpl",
controller: "ctrl_my_modal"
})
.when("/my_state/my_modal/my_modal_a", {
templateUrl: "/templates/my_modal_a.tpl",
controller: "ctrl_my_modal_a"
})
.when("/my_state/my_modal/my_modal_b", {
templateUrl: "/templates/my_modal_b.tpl",
controller: "ctrl_my_modal_b"
});
})
.run(function ($state) {
$state.go("my_state");
})
my_modal.tpl
<div ng-controller="ctrl_my_modal">
MODAL
<button ng-click="closeModal()">close</button>
<button ng-click="gotoA()">goto a</button>
<button ng-click="gotoB()">goto b</button>
<div ng-view></div>
</div>
index.html
<html ng-app="router_app">
<body>
<div ui-view="my_view"></div>
</body>
</html>
I continued trying to not use two different routers at the same time and finally I came up with a working solution.
It is based on this. I was running around the solution for some time, but finally I've got it working as I wanted.
Here is my final test app.
I want to use a unique controller inside and outside ui-view.
Using ng-inspector I see <div ui-view> has another instance of myController, not sure why.
<div class="container" ng-controller="myController">
::{{_path}}
<a ng-click="action()">action</a>
<div ui-view class="view"></div>
</div>
app.controller("myController",function ($scope) {
$scope.action = function(){
$scope._path= "changed";
}
});
The result of this issue is if I click on <button ng-click="action()">action</button> I see the changes in _path, if the same button is inside ui-view, _path doesn't changes. How can I make this work?
When you define your state you can specify the controller you want to use inside your view as follows:
$stateProvider.state('myState', {
url: '/my-state',
templateUrl: '/templates/my-state.html',
controller: 'myController'
});
Hope this helps.
I am using Angular bootsrap modal service. version of ui-bootstrap is angular-ui-bootstrap 1.3.3. below is my code.
First on module , I have registered correctly.
var angularFormsApp = angular.module("angularFormsApp", ["ngRoute", "ui.bootstrap"]);
then on angular controller , I have injected this directive correctly.
var loginController = function ($scope, $window, $routeParams, $uibModal, DataService)
then I am calling this modal by following code inside same controller
var onError = function (reason) {
$scope.modalOptions.headerText = "Error";
$scope.modalOptions.bodyText = reason.statusText;
$uibModal.open({
templateUrl: baseurl + 'app/ErrorMessages/PopUpErrorMessage.html',
controller: 'loginController'
});
};
$scope.cancelForm = function () {
$uibModalInstance.dismiss('cancel');
};
Now as you can see I have created separate html file for modal and below is html
<div class="modal-header">
<h3>{{modalOptions.headerText}}</h3>
</div>
<div class="modal-body">
<p>{{modalOptions.bodyText}}</p>
</div>
<div class="modal-footer">
<input type="button" class="btn btn-default" value="Close"
ng-click="cancelForm()" />
</div>
Now till here everything is working , I mean on error method , modal is showing but problem is its showing blank , even nothing happening on close button click.
There is no error in console of chrome browser. Here is screen shot.
Your Modal does not know about your controller's scope. Try changing to this:
$uibModal.open({
templateUrl: baseurl + 'app/ErrorMessages/PopUpErrorMessage.html',
scope: $scope
});
To use your current controller variables try to change
controller: 'loginController' to scope: $scope. It will pass current scope to the modal.
Similar problem was here: AngularJS passing data to bootstrap modal
I have some HTML which looks like this:
<body ng-controller="main">
<div id="main">
<div ng-view></div>
</div>
</body>
Here is the controller:
var app = angular.module('buildson', ['ngRoute', 'ngAnimate']);
app.controller('main', function($scope) {
$scope.$on("$routeChangeSuccess", function (event, currentRoute, previousRoute) {
window.scrollTo(0, 0);
});
});
And here is the Routing:
//ROUTING
app.config(function($routeProvider) {
$routeProvider
.when('/', {
templateUrl : 'home.html'
})
.when('/courses', {
templateUrl : 'views/coursesTeaching.html'
});
});
Here is coursesTeaching.html
<div class="coursesList">
[Display a list of courses here]
Display Documentation
</div>
And here is documentationWidget.html
Documentation Content is in this file
What I want to do is when they click on this link Display Documentation It loads the documentationWidget.html content into the <div class="documentationWidget"></div> spot, I suppose it is a view within a view or a sub-route. I can't do it with jQuery Ajax or anything because I want to be able to use Angular variables inside of the loaded html file.
Take a look at ui-router as an alternative to ngRoute. This has good support for nested views amongst other things: https://github.com/angular-ui/ui-router
This has also been discussed in more detail here: Difference between ng-route & ui-router
I've been told you should use the third-party library ui-router for complex routing operations.
i have the problem that AngularJS refreshes full Page and not only the ng-view
my config:
myApp.config(function($httpProvider, $routeProvider) {
//ROUTE
$routeProvider.when('/', {
templateUrl : 'views/mainForm.html',
controller : 'TabController'
}).when('/login', {
templateUrl : 'views/loginForm.html',
controller : 'LoginController'
}).otherwise({
redirectTo : '/',
});
});
my index:
<body>
<!--NAVBAR -->
<navbarform></navbarform>
<!--Login oder MainView -->
<div class="container-fluid">
<div class="main">
<div ng-view></div>
</div>
</div>
If i click on my Navbar button: {{username}} its not opening the dropdown. its refresh the full page...
what i`m doing wrong?
First Check :-
Was ng-app set ?
Is the controller TabController loaded ?
Checked for other JS error in the page.
After that :-
Debug using Firebug & AngScope.
And even after this issue is not resolved create a JSfiddle and post the link here.
Hope this helps.