Angular + ui.router - ui-view inside ui-view parenting issue

Question

I have the following scenario:

Mobile application written in Angular.

Login page that has not special layout - simple page.
home page that have a special layout including header and footer.
internal pages that also include header and footer.

So i want to be able to use two layouts 1- blank 2- with header and footer.

on my index.html page i added:

<div ui-view class="app-content"></div>

This is how my state provider looks like:

    .state('layout', {
        templateUrl: 'partials/mobile/layout.html',
        reloadOnSearch: false
    })
    .state('homepage', {
        url: "/",
        templateUrl: 'partials/mobile/home.html',
        parent: 'layout',
    })
    .state('internal-page', {
        url: "/internal/:id",
        templateUrl: 'partials/mobile/internal.html',
        parent: 'layout',
        controller:'InternalController',
    })     
    .state('login', {
        url: "/login",
        templateUrl: 'partials/mobile/login.html',
        controller: 'MobileLoginController',

    })

in layout.html i have used the same ui-view again:

<!-- App Body -->
    <div class="app-body" ng-class="{loading: loading}">
        <div class="app-content">
            <div ui-view></div>
        </div>
    </div>

The result is duplicate views, i get the same view twice when i'm using layouts.

The question: Can someone explain what am i doing wrong, and how can i nested the ui-view one inside another without duplicate the page?

enter image description here

My index.html complete page:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <base href="" />
    <title></title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimal-ui" />
    <meta name="apple-mobile-web-app-status-bar-style" content="yes" />
    <link rel="stylesheet" href="bower_components/mobile-angular-ui/dist/css/mobile-angular-ui-hover.css" />
    <link rel="stylesheet" href="bower_components/mobile-angular-ui/dist/css/mobile-angular-ui-base.css" />
    <link rel="stylesheet" href="bower_components/mobile-angular-ui/dist/css/mobile-angular-ui-desktop.css" />
    <link rel="stylesheet" href="css/mobile/layout.css"/>

    <script src="bower_components/angular1.3/angular.js"></script>
    <script src="bower_components/angular1.3/angular-route.js"></script>
    <script src="bower_components/angular-touch/angular-touch.min.js"></script>
    <script src="bower_components/mobile-angular-ui/dist/js/mobile-angular-ui.js"></script>
    <script src="bower_components/mobile-angular-ui/dist/js/mobile-angular-ui.gestures.js"></script>
    <script src="bower_components/mobile-angular-ui/dist/js/mobile-angular-ui.migrate.js"></script>
    <script src="bower_components/angular-ui-router/release/angular-ui-router.min.js"></script>
    <script src="bower_components/angular-cookies/angular-cookies.min.js"></script>
    <script src="bower_components/angular-bootstrap/ui-bootstrap.min.js"></script>
    <script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.min.js"></script>
    <script src="bower_components/jquery/dist/jquery.min.js"></script>
    <script src="bower_components/angular-websocket/angular-websocket.js"></script>


    <script src="js/common/app.js"></script>
    <script src="js/mobile/app.js"></script>

    <script src="js/common/services.js"></script>
    <script src="js/common/controllers.js"></script>
    <script src="js/common/filters.js"></script>

    <script src="js/mobile/controllers.js"></script>
    <script src="js/mobile/directives.js"></script>
    <script src="js/mobile/services.js"></script>
</head>
<body ng-app="myApp" ng-controller="ApplicationController" ng-swipe-right="swipe('right')" ng-swipe-left="swipe('left')">
<div data-ng-show="loading" class="app-content-loading">
    <div class="spinner-background">
        <div class="loader-image"></div>
    </div>
</div>
<div ui-view class="app-content"></div>
<div ui-yield-to="modals"></div>
</body>
</html>

My app.js page:

angular.module('myApp', [
    'myApp.common',
    'ngRoute',
    'ngTouch',
    'ui.router',
    'ui.bootstrap',
    'mobile-angular-ui',
    'ngCookies',
    'myApp.filters',
    'myApp.services',
    'myApp.services.mobile',
    'myApp.directives',
    'myApp.controllers',
    'myApp.controllers.mobile',
    'mobile-angular-ui.gestures',
    'mobile-angular-ui.migrate',
    'angular-websocket'

])

Radim Köhler · Accepted Answer · 2015-01-14 06:48:54Z

1

I created working plunker - BUT 1 : 1 with your question snippet. Based on that code you've shown, I must say:

All your (shown) code is correct and working. The issue is elsewhere...

It could be some lost ui-view elsewhere

<div class="app-body" ng-class="{loading: loading}">
    <div class="app-content">
        <div ui-view></div>
    </div>
    // suspected to me is lost child ... with the ui-view attribute
    <div ui-view></div> // doubled target declaration
</div>

Check that your code is working here

answered Jan 14, 2015 at 6:48

Radim Köhler

124k48 gold badges243 silver badges343 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Liad Livnat Over a year ago

Thanks, i didn't find the lost child you mention, not sure how is it working for you and what am i doing wrong, i attached an images you can see there the duplication, maybe it will give you a clue of what i do wrong..

Liad Livnat Over a year ago

is there any workaround you can think of that may able to solve my issue?

Radim Köhler Over a year ago

The best we can do: change my plunker to reproduce the issue. I will gladly assist and help to find a way

Liad Livnat Over a year ago

seems like it's not related to the parentheses, it happens also with only a simple view with without parenting it means that for some reasone it's multiply the ui-view, i'm attaching the app configuration, and the modules i used, but i can't make it happen on remote.

Radim Köhler Over a year ago

I am trying to say: that is never happening to me. I do use UI-Router heavily. And I created even working plunker. Unless you can provide me with its update - not working, I cannot help (even if I wish). Simply, doubled rendering means: there are two anchors... from my experience...

|

Collectives™ on Stack Overflow

Angular + ui.router - ui-view inside ui-view parenting issue

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related