CODEWITHSUNDEEP
angularjsangular-ui-router
Yuri Taratorkin
Yuri Taratorkin

Reputation: 647

Cant change ui-view template from child state

I want display loginModal.html inside loginModal view after user enter main.login state, but it is not happening. Why?

html

<div ui-view="loginModal">

</div>

<div ui-view="content">

</div>

js

.state('main', {
            url: '/',
            views: {
                "content": {
                    templateUrl: 'app/views/index.html'
                }
            }
        })
.state('main.login', {
            url: 'login',
            views: {
                "loginModal": {
                    templateUrl: 'app/views/login.html'
                }
            }
        })

Upvotes: 0

Views: 36

Answers (1)

ddelemeny
ddelemeny

Reputation: 1931

"loginModal@"

You have to explicitely target the loginModal view in the root unnamed state.

.state('main.login', {
            url: 'login',
            views: {
                "loginModal@": {
                    templateUrl: 'app/views/login.html'
                }
            }
        })

Explain PLZ

<root> is the parent of <root>.main, which is itself the parent of <root>.main.login. <root> here is an implicit state, which has your base page as template (roughly).

With named views, a descendant view targets its direct parent templates, unless explicitely told otherwise. Your ui-view="loginModal" exists in a higher ancestor state than main, so you have to explicitely target that ancestor.

For a detailed overview of view targeting, see https://github.com/angular-ui/ui-router/wiki/Multiple-Named-Views

Upvotes: 1

Related Questions