Как использовать ui-view на RenderBody () в angularjs

Question

У меня есть HTML-разметка с @RenderBody ():

<div layout="column" class="relative" layout-fill role="main">
    <md-toolbar class="md-hue-2">
        <div class="md-toolbar-tools">
            <md-button class="md-icon-button" aria-label="Settings" ng-disabled="true">
                    <md-icon md-svg-icon="navigation:menu"></md-icon>
            </md-button>

            <md-button ui-sref="dashboard">Dashboard</md-button> 
            <md-button ui-sref="home">Home</md-button> 
        </div>
    </md-toolbar>
    <md-content layout-fill md-padding>
        <div id="main-content" ui-view="">
            @RenderBody()
        </div>
    </md-content>
</div>

и JS здесь:

app.config(function ($stateProvider, $urlRouterProvider, $locationProvider) {

$urlRouterProvider.otherwise('/Home/Index');

$stateProvider
    .state('home', {
        url: '/Home/Index',
        templateUrl: '/Home/Index' // corresponds to an MVC partial route
    })
    .state('dashboard', {
        url: 'Home/Dashboard',
        templateUrl: '/Home/Dashboard' // corresponds to an MVC partial route
    })
});

Результатом является собственное представление внутри представления. Я не могу понять это. Вот вывод:

Answer 1

Я вижу эту проблему в нескольких моих приложениях. Ваш макет загружается дважды. Все, что вам нужно сделать, это сделать ваш макет пустым при рендеринге из uiroute, как показано ниже. Добавьте это поверх вашей страницы Index.cshtml

@{ 
    Layout = null;
}

Или загрузите пользовательский интерфейс, чтобы просмотреть содержимое div

 <md-content layout-fill md-padding>
        <div id="main-content">
            @RenderBody()
        </div>
    </md-content>
  <ui-view></ui-view>

Или вы можете использовать viewContentLoaded, который запускается после загрузки DOM при использовании uirouter в угловом режиме, как показано ниже:

  //trigger events after DOM content load
                $scope.$watch("$viewContentLoaded",
                    function() {
                        if (document.getElementsByTagName("header").length === 2) {
                            document.getElementsByTagName("header")[1].remove();
                        }
                        if (document.getElementsByTagName("footer").length === 2) {
                            document.getElementsByTagName("footer")[1].remove();
                        }
                    });