angularjs - 如何在 angularjs 中的 RenderBody() 上使用 ui-view

Question

我有这个带有@RenderBody() 的标记html：

<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
    })
});

结果是在视图中它自己的视图。我想不通。这是输出：

标签： angularjsasp.net-mvc

Answer 1

我在我的几个应用程序中看到了这个问题。您的布局正在加载两次。在从 uiroute 渲染时，您需要做的就是“使您的布局为空”，如下所示。将此添加到您的 Index.cshtml 页面顶部

@{ 
    Layout = null;
}

或者在内容 div 之外加载 ui-view

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

或者您可以使用在 Angular 中使用 uirouter 时在加载 DOM 后触发的 viewContentLoaded，如下所示：

  //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();
                        }
                    });