Question

大家。

我使用以下内容：

角度：1.6.1，角度材料：1.1.3， angular-ui-router：1.0.0-rc.1

我的所有视图都是使用组件构建的，我使用UI-Router 1.x组件语法路由它们：

$stateProvider

    .state('main', {
            url: '/main',
            component: 'main',
        })

为了完整起见，我的组件布局如下：

angular
.module('app.main')
.component('main', {
    templateUrl: '/modules/main/main.html',
    controller: MainCtrl,
})

MainCtrl.$inject = [];

function MainCtrl (){

}

我的index.html如下：

<body ng-app="app" layout="column" ng-cloak>

<md-toolbar layout="row" layout-align="center center">
    <h1>Site Title</h1>
</md-toolbar>

<div layout="column" flex ui-view></div>

此时我对主要组件的看法无关紧要，因为问题从这里开始。例如，如果我对main.html的观点如下：

<div layout="row" flex>
    Content
</div>

div不会弯曲。但是，如果只是简单地添加它来代替父级中的ui-view，它将正常弯曲。

<body ng-app="app" layout="column" ng-cloak>

<md-toolbar layout="row" layout-align="center center">
    <h1>Site Title</h1>
</md-toolbar>

<div layout-align="column" flex>
    Content (THIS WORKS FINE!)
</div>

除了使用ui-view的常见差异外，两者在检查器中都包含相同的属性。

这似乎也导致了md-content的问题，只有当它是包含ui-view的父元素时才会滚动。任何嵌套的md-contents都不会滚动。

我也尝试使用原始的ui-router方式路由到控制器和模板，这是.component语法之前的标准。

此处列出了类似的问题： Angular Material layout breaks when using UI-Router

这位绅士的解决方案似乎是放弃了UI-Router并使用了ng-route。我真的不想离开UI-Router并考虑完全放弃Angular-Material，但我真的更愿意避免这种情况。

有人可以帮帮忙吗？

Angular UI-Router打破Angular Material Flex和md-content

0 个答案: