關閉 Angular Material 對話框

Question

從控制器調用 $mdDialog.cancel() 將關閉對話框。 但是有沒有一種方法可以不使用控制器直接從 html 中關閉對話框？ 我想要這樣的工作：

<md-dialog-actions layout="row">
      <span flex></span>
      <md-button ng-click="$mdDialog.cancel()" style="margin-right:20px;" >
        Ok
      </md-button>
    </md-dialog-actions>

Answer 1

在您的show()代碼中，您可以創建一個子作用域並添加close()函數：

$mdDialog.show({
    ...
    scope: angular.extend($scope.$new(), { close: function() {$mdDialog.cancel();} })
});

然后在對話框的 HTML 中，只需使用ng-click="close()" 。

或者，您可以將$mdDialog對象作為作用域的屬性傳遞。

然而，它比創建控制器（也可以在show()函數中創建show()更多的代碼。

Answer 2

簡直

<md-button ng-click="cancel()"></md-button>

在你的對話控制器中

$scope.cancel = function() {
    $mdDialog.cancel();
}

Answer 3

您可以將mat-dialog-close添加到要從中觸發關閉事件的按鈕

示例： <button mat-dialog-close> Close </button>

Answer 4

您可以將范圍綁定到對話框配置中：

 $mdDialog.show({ targetEvent: $event, template: '<md-dialog>' + ' <md-dialog-content>Hello {{ employee }}!</md-dialog-content>' + ' <md-dialog-actions>' + ' <md-button ng-click="closeDialog()" class="md-primary">' + ' Close Greeting' + ' </md-button>' + ' </md-dialog-actions>' + '</md-dialog>', scope: $scope, preserveScope: true });

有關配置屬性的更多信息，您可以在此處查看對話框配置文檔