Angular-Material 无法用按钮关闭 $mdDialog

Angular-Material cannot close $mdDialog with a button

我无法获得关闭模态框的按钮,也无法在模态框外单击以关闭 window。我没有收到错误,使用简单的 Controller 或 ControllerAs 语法时遇到同样的问题。

我的示例模态代码:

angular.module('MyApp').controller('TestCtrl', ["$scope", "$mdDialog",
    function($scope, $mdDialog) {

        var alert;
        $scope.showInfoModal = showGameInfoModal;

        // Internal method
        function showGameInfoModal(schedule) {
            $scope.schedule = schedule;

            alert = $mdDialog.show({
                clickOutsideToClose: true,
                disableParentScroll: true,
                escapeToClose: true,
                scope: $scope,        // use parent scope in template
                preserveScope: true,  // do not forget this if use parent scope

                // Since GreetingController is instantiated with ControllerAs syntax
                // AND we are passing the parent '$scope' to the dialog, we MUST
                // use 'vm.<xxx>' in the template markup
                templateUrl: 'Modules/Test/Test2.html',
                controller: function DialogController($scope, $mdDialog) {
                    $scope.closeDialog = function() {
                        $mdDialog.hide();
                    };
                },
                controllerAs: 'dc'
            });

        }

    }
]);

然后是偏音 HTML:

<md-content>
    <md-toolbar flex layout="row" layout-align="center">
        <h5>{{schedule.GameDate</h5>
    </md-toolbar>
    <section layout="column" layout-align="center">
        <div ng-init="coords={latitude: false, longitude: false}">
            <gm-map options="{center: [43.6576221, -79.607505], zoom: 13, mapTypeId: google.maps.MapTypeId.ROADMAP}">
                <gm-marker options="{position: [43.6576221, -79.607505], draggable: false}">
                    <gm-infowindow options="{content: 'Max Ward 2'}"></gm-infowindow>
                </gm-marker>
            </gm-map>
        </div>
    </section>

    <section>
        <div class="md-actions">
            <md-button ng-click="dc.closeDialog()" class="md-fab md-fab-bottom-right md-mini" aria-label="Close"><ng-md-icon icon="close"></ng-md-icon></md-button>
        </div>
    </section>
</md-content>    

在搜索更多示例时,我发现我遗漏了 <md-dialog> 标签。

<md-dialog aria-label="Game Info and Map">
    <md-content>
        <md-toolbar flex layout="row" layout-align="center">
            ...
        </md-toolbar>
    </md-content>
</md-dialog>