如何在Angular材料设计中使md内容可滚动

Question

我在md-content中使用ui-view来显示列表,但是我想要md-content中列表的溢出应该可以滚动这里是我的index.html

<div layout-lt-lg="row" class="screen-bg">
    <div flex-lt-lg="100">

        <!--header-->
        <md-toolbar class="app-bar-bg" style="background-color: #9013fe;">
            <div class="status-bar-bg"></div>
            <div class="md-toolbar-tools">

                <md-button class="md-icon-button" aria-label="Settings">
                    <!--<md-icon md-svg-icon="app/images/back1.svg"></md-icon>-->
                </md-button>
                <h2>
                    <span></span>
                </h2>
                <span flex=""></span>
                <md-button class="md-icon-button" aria-label="Favorite">
                    <!--<md-icon md-svg-icon="app/images/a.svg"></md-icon>-->
                </md-button>

            </div>
        </md-toolbar>

        <!--content-->
        <div>
            <md-content>

                <ui-view></ui-view>
            </md-content>
        </div>
    </div>
</div>

这是我的模板

 <md-list flex>
        <md-list-item class="md-3-line" ng-repeat="broadCast in broadCasts">
          <div class="md-list-item-text" layout="column" >
            <h3>{{broadCast.name}}</h3>
            <h3>{{broadCast.phone}}</h3>
          </div>
        </md-list-item>
 </md-list>

Answer 1

要使列表可滚动:

1. 将类添加到md-list.

   <md-list class="make-scrollable" flex>
     <md-list-item class="md-3-line" ng-repeat="broadCast in broadCasts">
       <div class="md-list-item-text" layout="column">
         <h3>{{broadCast.name}}</h3>
         <h3>{{broadCast.phone}}</h3>
       </div>
     </md-list-item>
   </md-list>
   

2. 在你的css文件中设置md-list的样式,如下所示:

   md-list.make-scrollable {
       height: 600px; //Or any other height you wish
       overflow-y: scroll;
   }
   

这应该使溢出的内容可滚动