AngularJS UI-Router nested views

Question

I am trying to put a nested view inside my modal. I can pull in the first-layer views fine but the nested view is tricking me somehow. Not sure what I am missing here?

http://plnkr.co/edit/g9cScdORPOz57zGCzQDA

var App = angular.module('App', ['ui.router']); // routes // ------------------------- App.config(function($stateProvider, $urlRouterProvider) { $stateProvider // default state route .state('app',{ url: '/', views: { 'content': { templateUrl: 'home.html' }, 'modals': { templateUrl: 'modal.html' } } }) // + modal content .state('app.form', { url: '/form', views: { 'modal-content@modals': { templateUrl: 'form.html' } } }) //catch all route $urlRouterProvider.otherwise('/'); })

If you want to use bootstrap components in an AngularJs application, i would suggest to use angular-ui.github.io/bootstrap — Numyx
– Numyx, Commented Jun 10, 2015 at 18:54

Jeremy · Accepted Answer · 2015-06-10 18:54:10Z

Like Nikhil.agw said, you are not changing your state when you open your modal.

You could do it like that: http://plnkr.co/edit/eMNBBUYmKI6PRPiyU4xx?p=preview

<li><a href="#" data-toggle="modal" ui-sref="app.form" data-target="#myModal">Open this modal</a></li>

Then just include a way to return to the previous state when the modal closes.

Considering converting to UI Bootstrap if these issue will be common. angular-ui.github.io/bootstrap

Nikhil Aggarwal · Accepted Answer · 2015-06-10 18:43:00Z

It is not going to work because on click you are only toggling the modal. Your state/route is not being changed. And route/state is not being changed, how will the nested state come in picture?

Collectives™ on Stack Overflow

AngularJS UI-Router nested views

2 Answers 2

1 Comment

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Related