CODEWITHSUNDEEP
angularjsangular-ui-router
Alan2
Alan2

Reputation: 24602

Why does my view not appear in angular-ui-router?

Here are the router states that I have:

var homeWords = {
    name: 'home.words',
    url: 'words',
    views: {
        'home@': {
            templateUrl: 'app/admin/word/words.html'
        }
    }
};

var homeWordsWord = {
    name: 'home.words.word',
    url: '/:wordId',
};

var homeWordsWordEdit = {
    name: 'home.words.word.edit',
    url: '/edit',
    templateUrl: 'app/admin/word/word.html',
};

and my words.html:

<div class="mw100p"
     ng-show="$state.is('home.words')  || $state.is('home.words.word')">
    <ng-include src="'/app/admin/word/words-controls.html'"></ng-include>
    <ng-include src="'/app/admin/word/words-grid.html'"></ng-include>
    <div class="grid form contentInnerPanel w100p"
         ng-show="exs.gridNoDataMessage != null"
         style="margin-top: 0; border-top: none;">
        <div class="gridBody">
            <div>
                <div><div>{{wos.gridNoDataMessage}}</div></div>
            </div>
        </div>
    </div>
</div>
<div ui-view></div>

When I select the home.words view then I see the first part of the HTML. When I select the home.words.word view I see the first part of the HTML.

When I select the home.words.word.edit view then I don't see anything.

Should I change <div ui-view></div> to use a view name and somehow specify this in the templateUrl of homeWordsWordEdit

Upvotes: 0

Views: 32

Answers (1)

Pankaj Parkar
Pankaj Parkar

Reputation: 136194

Because you haven't mentioned template with ui-view directive in home.words.word so that will act as a wrapper view for home.words.word.edit state as its child of home.words.word.

var homeWordsWord = {
    name: 'home.words.word',
    url: '/:wordId',
    template: '<div ui-view></div>'
};

Upvotes: 1

Related Questions