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

结果是视图中自己的视图。我不知道。这是输出：

Answer 1

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

@{ 
    Layout = null;
}

或将ui-view加载到内容div之外

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

或者您可以使用如下所示的角度使用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();
                        }
                    });

如何在angularjs中的RenderBody（）上使用ui-view

1 个答案: