在ng-repeat元素上打开角度材质对话框

时间:2016-03-02 15:09:09

标签: javascript angularjs angular-material

我有一系列与ng-repeat一起使用的元素。每个元素都包含带有ng-click指令的md-card指令,该指令调用打开角度材料对话框窗口的函数。

打开对话框后,滚动到顶部。但它只在重新加载页面后发生一次。在对话框控制器中使用$ mdDialog.hide(result)时的行为相同。

这是我的HTML。

<div layout="row" ng-if="!isLoading" ng-repeat="booking in calendarCtrl.currentBookings | orderBy:'start'">
            <div class="time" flex="15" layout="column" layout-align="start end">
                <span ng-bind="::booking.start"></span>
                <span ng-bind="::calendarCtrl.calculateEndTime(booking.start,booking.time)"></span>
            </div>
            <md-card flex ng-click="calendarCtrl.openDialog(booking,$event)">
                <md-card-header>
                    <md-card-avatar>
                        <img ng-src="imgs/logo.png" class="md-user-avatar" alt="img"/>
                    </md-card-avatar>
                    <md-card-header-text layout="row">
                        <span flex class="md-title" ng-bind="::booking.client"></span>
                        <span ng-if="!booking.confirmed" class="isUnread"></span>

                    </md-card-header-text>
                </md-card-header>
                <div class="service" layout="column">
                <span class="md-body-1">
                        <span ng-if="booking.phone" ng-bind="::booking.phone"></span>
                        <span ng-if="booking.phone && booking.email"> | </span>
                        <span ng-if="booking.email" ng-bind="::booking.email"></span>
                    </span>
                    <span ng-style="calendarCtrl.setColor(booking.reservationTypeName,0.5)">
                        <span class="circle" ng-style="calendarCtrl.setColor(booking.reservationTypeName,1)"></span>
                        <span class="text" ng-bind="booking.reservationTypeName"></span>
                    </span>
                </div>
                <div ng-if="calendarCtrl.checkComment(booking.comment)">
                    <hr/>
                    <md-card-content>
                        <div class="description">
                            <p ng-bind="::booking.comment"></p>
                        </div>
                    </md-card-content>
                </div>
            </md-card>
        </div>

和函数calendarCtrl.openDialog(预订,$ event)

 function openDialog(booking,event){
        dialogService.openDialog(booking,event,self.reservationTypes.get(booking.reservationTypeName))
            .then(function(answer) {
                console.log(`You confirm booking with id: ${answer.id}`);
                console.log(answer)
            }, function() {
                console.log('You close the dialog.');
            });
    }

和dialogService.openDialog函数

function openDialog(booking,event,color){

        return $mdDialog.show({
            templateUrl: 'dialog/dialog.html',
            controller: 'dialogController',
            controllerAs: 'dialogCtrl',
            parent: angular.element(document.body),
            targetEvent: event,
            clickOutsideToClose:true,
            locals:{
                booking:booking,
                color:color
            }
        })

    }

请帮忙。

0 个答案:

没有答案