css - $mdtoast 在滚动页面底部的位置

Question

$scope.addPlaylist = function(song) {
      $scope.playlist.push(song);
      var el = angular.element(document.body);
      $mdToast.show(
        $mdToast.simple()
          .textContent(song.title + ' added to playlist.')
          .position('bottom')
          .hideDelay(3000)
          .parent(el)
      );
    }

我对 CSS 和位置属性没有经验，刚开始使用 Angular Material 。我正在尝试使用 mdtoast 服务，但无法将其正确定位在页面底部。

即使在将元素设置为 document.body 之后，当我向下滚动时，mdtoast 的位置也会悬停在页面中间，如附件中的截图所示。如何让它在滚动后从页面底部弹出。

相关html代码:

<md-toolbar class="md-theme-indigo">
    <div class="md-toolbar-tools">
        <a ui-sref="player.songs"><img src="assets\images\music-player.png" width="50px" height="50px"></img>
        </a>
        <md-button class="md-icon-button" aria-label="play" ng-click="stopSong()" ng-show="isPlaying">
            <md-icon md-svg-icon="assets/icons/clear.svg"></md-icon>
            <md-tooltip md-direction="bottom" md-visible="tooltipVisible" md-autohide="true">
                Stop
            </md-tooltip>
        </md-button>
        <md-button class="md-icon-button" aria-label="play" ng-click="resumeSong()" ng-show="isPaused">
            <md-icon md-svg-icon="assets/icons/play.svg"></md-icon>
            <md-tooltip md-direction="bottom" md-visible="tooltipVisible" md-autohide="true">
                Resume
            </md-tooltip>
        </md-button>
        <md-button class="md-icon-button" aria-label="pause" ng-click="pauseSong()" ng-show="isPlaying && !isPaused">
            <md-icon md-svg-icon="assets/icons/pause.svg"></md-icon>
            <md-tooltip md-direction="bottom" md-visible="tooltipVisible" md-autohide="true">
                Pause
            </md-tooltip>
        </md-button>
        <md-button class="md-icon-button" aria-label="repeat" ng-click="enableLoop()">
            <md-icon md-svg-icon="{{repeat_icon}}"></md-icon>
            <md-tooltip md-direction="bottom" md-visible="tooltipVisible" md-autohide="true">
                Repeat
            </md-tooltip>
        </md-button>
        <span flex></span>
        <h3 hide show-gt-sm>Music Player</h3>
        <span flex></span>
        <md-button ui-sref="player.radio" class="md-icon-button" aria-label="radio" ng-show="state === 'songs'">
            <md-icon md-svg-icon="assets/icons/radio.svg"></md-icon>
            <md-tooltip md-direction="bottom" md-visible="tooltipVisible" md-autohide="true">
                Go To Radio
            </md-tooltip>
        </md-button>  
        <md-button ui-sref="player.songs" class="md-icon-button" aria-label="songs" ng-show="state === 'radio'">
            <md-icon md-svg-icon="assets/icons/queue_music.svg"></md-icon>
            <md-tooltip md-direction="bottom" md-visible="tooltipVisible" md-autohide="true">
                Go To Songs
            </md-tooltip>
        </md-button>  
        <md-menu md-position-mode="target-right target" hide-gt-sm>
            <md-button class="md-icon-button" aria-label="controls" ng-click="$mdOpenMenu($event)">
                <md-icon md-svg-icon="assets/icons/settings.svg"></md-icon>
            </md-button>
            <md-menu-content width="6" layout-padding>
                <label><md-icon md-svg-icon="assets/icons/volume_up_black.svg"></md-icon></label>
                <md-slider md-discrete ng-model="player.volume" step="0.1" min="0.0" max="1" aria-label="volume"></md-slider>
                <label ng-if="!isRadio"><md-icon md-svg-icon="assets/icons/fast_forward_black.svg"></md-icon></label>
                <md-slider md-discrete ng-model="player.currentTime" step="1" min="1" max="{{player.duration}}" aria-label="seek" class="md-primary" ng-if=!isRadio></md-slider>
            </md-menu-content>
        </md-menu>
        <md-menu md-position-mode="target-right target" layout="column" layout-align="center center">
            <md-button class="md-icon-button" aria-label="controls" ng-click="$mdOpenMenu($event)">
                <md-icon md-svg-icon="assets/icons/apps.svg"></md-icon>
                <md-tooltip md-direction="bottom" md-visible="tooltipVisible" md-autohide="true">
                    Apps
                </md-tooltip>
            </md-button>
            <md-menu-content width="2">
                <md-button ui-sref="reddit"><span md-menu-align-target>Reddit</span></md-button>
                <md-divider></md-divider>
                <md-button ui-sref="player.songs"><span md-menu-align-target>Music</span></md-button>
            </md-menu-content>
        </md-menu>    
    </div>
</md-toolbar>
<md-progress-linear class="md-warn md-hue-3" md-mode="determinate" value="{{progress}}" ng-if="!isRadio"></md-progress-linear>
<section layout="row" layout-fill>
    <md-sidenav class="md-sidenav-left md-whiteframe-z2" md-component-id="left" md-is-locked-open="$mdMedia('gt-md')">
        <md-toolbar class="md-theme-indigo">
            <md-sub class="md-toolbar-tools">Status<span ng-show="isPaused">&nbsp;<span class="md-caption">Paused</span></span></h1>
            <span flex></span>
            <md-button class="md-primary" aria-label="play_all" ng-hide="!playlist.length" ng-click="nextSong()">{{isPlaying ? 'Next':'Play All'}}</md-button>
        </md-toolbar>
        <md-content layout="column" ng-show="isPlaying" layout-align="center center" layout-padding>
            <md-subheader class="md-primary">{{playing}}</md-subheader>
        </md-content>
        <md-divider></md-divider>
        <md-content layout="column" layout-padding>
            <img src="assets/images/yeoman.png" width="130px;" height="100px;" style="margin-left: auto;margin-right: auto;" ng-hide="playlist.length">
            <p class="md-caption" style="margin-left: auto;margin-right: auto; text-align: center;" " ng-hide="playlist.length">Add to this playlist by clicking the <md-icon md-svg-icon="assets/icons/menu_black.svg" style="color: #0F0;" aria-label="Alarm Icon"></md-icon> icon in the listing and selecting "Add To Playlist"</p>
            <div layout="row">
                <h3 class="md-title" style="color: green;" ng-show="playlist.length">Next Up</h3>
                <span flex></span>
                <md-button class="md-fab md-mini md-warn" aria-label="clear_all" ng-hide="!playlist.length" ng-click="clearPlaylist()">
                    <md-icon md-svg-icon="assets/icons/clear_all.svg"></md-icon>
                    <md-tooltip md-direction="bottom" md-visible="tooltipVisible" md-autohide="true">
                        Clear Playlist
                    </md-tooltip>
                </md-button>
            </div>
            <md-list ng-repeat="item in playlist track by $index" ng-show="playlist.length" id="toastParent">
                <md-list-item class="md-list-item-text">
                    <p class="md-caption"><em>{{ item.title }}</em></p>
                </md-list-item>
                <hr/>
            </md-list>
        </md-content>
        <md-divider></md-divider>
    </md-sidenav>
    <section layout="column" flex>
        <md-toolbar class="md-theme-indigo" hide show-gt-sm>
            <div class="md-toolbar-tools">
                <md-button class="md-icon-button" aria-label="repeat" ng-click="prevSong()" ng-if="!isRadio">
                    <md-icon md-svg-icon="assets/icons/skip_previous.svg"></md-icon>
                    <md-tooltip md-direction="bottom" md-visible="tooltipVisible" md-autohide="true">
                        Prev
                    </md-tooltip>
                </md-button>
                <md-slider ng-model="player.currentTime" step="1" min="1" max="{{player.duration}}" aria-label="seek" class="md-warn flex" style="padding-left: 20px; padding-right: 20px" ng-if="!isRadio"></md-slider>
                <md-button class="md-icon-button" aria-label="repeat" ng-click="nextSong()" ng-if="!isRadio">
                    <md-icon md-svg-icon="assets/icons/skip_next.svg"></md-icon>
                    <md-tooltip md-direction="bottom" md-visible="tooltipVisible" md-autohide="true">
                        Next
                    </md-tooltip>
                </md-button>
                <md-divider md-inset ng-if="!isRadio"></md-divider>
                <md-button class="md-icon-button" aria-label="mute" ng-click="volMute()">
                    <md-icon md-svg-icon="assets/icons/volume_down.svg"></md-icon>
                    <md-tooltip md-direction="bottom" md-visible="tooltipVisible" md-autohide="true">
                        Mute
                    </md-tooltip>
                </md-button>
                <md-slider ng-model="player.volume" step="0.1" min="0.0" max="1" aria-label="volume" class="md-warn md-hue-3 flex" style="padding-left: 20px; padding-right: 20px"></md-slider>
                <md-button class="md-icon-button" aria-label="volfull" ng-click="volMax()">
                    <md-icon md-svg-icon="assets/icons/volume_up.svg"></md-icon>
                    <md-tooltip md-direction="bottom" md-visible="tooltipVisible" md-autohide="true">
                        Max
                    </md-tooltip>
                </md-button>
            </div>
        </md-toolbar>
        <img src="assets/play_stop.gif" alt="Loading" ng-if="loading" layout-fill>
        <div ng-if="!loading" layout="column" layout-fill>
            <md-button class="md-fab md-primary" style="position:fixed; bottom:0; left:0" aria-label="openSidebar" ng-click="openSidebar()" hide-gt-md>
                <md-icon md-svg-src="assets/icons/featured_play_list.svg"></md-icon>
                <md-tooltip md-direction="right" md-visible="tooltipVisible" md-autohide="true">
                    Show sidebar
                </md-tooltip>
            </md-button>
            <md-content flex>
                <section ng-cloak>
                        <div ui-view></div>
                </section>
            </md-content>
        </div>
    </section>
</section>

$mdToast 在 md-list-item 元素中调用 addPlaylist() 时被触发。

Answer 1

所以... Angular Material 目前在 $mdToast 定位方面存在一些问题(请参阅 Github 问题)。然而，有一个解决方法:向父元素添加 layout 和 flex 指令应该可以解决问题。