Md对话框功能障碍触发按钮包含在md-dialog控制器中

时间:2016-05-18 13:27:02

标签: angularjs mddialog

我跟着documentation生成了工作的md-dialog,但是我一直停留在功能失常的按钮上,这会触发对话框。打开和关闭对话框后,触发按钮(在该控制器中使用脚本的所有内容)似乎无法正常工作。

以下是CodePen和代码。

var app = angular.module('app', ['ngMaterial', 'ngAnimate']);

// Dialog controller
app.controller('showDialogCtrl',
  function ($scope, $mdDialog) {
    // Showing order form dialog
    $scope.showDialog= function($event){
      $mdDialog.show({
         targetEvent: $event,
         clickOutsideToClose: true,
         scope: $scope,
         template: 
            '<md-dialog>' +
            '  <md-dialog-content>Hello!</md-dialog-content>' +
            '  <md-dialog-actions>' +
            '    <md-button ng-click="closeDialog()" class="md-primary">' +
            '      Close' +
            '    </md-button>' +
            '  </md-dialog-actions>' +
            '</md-dialog>',
         parent: angular.element(document.body),
         controller: DialogController,
      });
      function DialogController($scope, $mdDialog) {
        $scope.closeDialog = function() {
          $mdDialog.hide();
        };
      };
    }
});    

<md-button ng-controller="showDialogCtrl" ng-click="showDialog($event)">
Click
</md-button>

1 个答案:

答案 0 :(得分:1)

您正在将父$scope传递给对话框,当您关闭对话框时,该对话框会自动删除。将preserveScope: true添加到对话框配置中,以便在关闭对话框后不会删除它。

文档:https://material.angularjs.org/HEAD/api/service/$mdDialog