$mdDialog.confirm() 与自定义 templateUrl

CSS

使用Angular Material中的mdDialog.confirm()方法和自定义templateUrl可以实现弹出确认对话框的功能。该对话框可以用于提示用户进行确认操作，以确保用户意图。

在下面的案例代码中，我们将使用Angular Material库中的mdDialog服务和自定义模板来创建一个确认对话框。

首先，在HTML文件中，我们需要引入Angular Material库和自定义的CSS文件。

html
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
  <Meta charset="UTF-8">
  <title>mdDialog Confirm Example</title>
  <link rel="stylesheet" class="url" target="_blank" rel="nofollow noreferrer" href="/to/?target=https://cdnJS.cloudflare.com/Ajax/libs/angular-material/1.1.19/angular-material.min.CSS">
  <link rel="stylesheet" class="url" target="_blank" rel="nofollow noreferrer" href="/to/?target=style.CSS">
</head>
<body ng-controller="myCtrl">
  <md-button class="md-rAIsed md-primary" ng-click="showConfirmDialog()">Open Confirm Dialog</md-button>
  <script src="https://cdnJS.cloudflare.com/Ajax/libs/angular.JS/1.6.5/angular.min.JS"></script>
  <script src="https://cdnJS.cloudflare.com/Ajax/libs/angular-animate/1.6.5/angular-animate.min.JS"></script>
  <script src="https://cdnJS.cloudflare.com/Ajax/libs/angular-aria/1.6.5/angular-aria.min.JS"></script>
  <script src="https://cdnJS.cloudflare.com/Ajax/libs/angular-messages/1.6.5/angular-messages.min.JS"></script>
  <script src="https://cdnJS.cloudflare.com/Ajax/libs/angular-material/1.1.19/angular-material.min.JS"></script>
  <script src="script.JS"></script>
</body>
</html>

接下来，在JavaScript文件中，我们需要定义一个Angular模块和一个控制器。

Javascript
angular.module('myApp', ['ngMaterial'])
  .controller('myCtrl', function($scope, $mdDialog) {
    $scope.showConfirmDialog = function() {
      var confirm = $mdDialog.confirm()
        .title('确认对话框')
        .textContent('你确定要执行此操作吗？')
        .ok('确定')
        .cancel('取消');
      $mdDialog.show(confirm).then(function() {
        // 用户点击了确定按钮
        console.log('执行操作');
      }, function() {
        // 用户点击了取消按钮
        console.log('取消操作');
      });
    };
  });

在这个例子中，我们在控制器中定义了一个showConfirmDialog()方法，当用户点击按钮时，该方法将显示一个确认对话框。

在确认对话框中，我们使用mdDialog.confirm()方法创建一个确认对话框实例，并设置对话框的标题和内容。我们还通过调用ok()和cancel()方法来设置对话框的确定和取消按钮的文本。

最后，我们使用$mdDialog.show()方法来显示确认对话框。当用户点击确定按钮时，传递给show()方法的回调函数将被调用，我们可以在其中执行我们需要的操作。如果用户点击取消按钮，传递给show()方法的回调函数将被调用，我们可以在其中处理取消操作。

案例代码：

html
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
  <Meta charset="UTF-8">
  <title>mdDialog Confirm Example</title>
  <link rel="stylesheet" class="url" target="_blank" rel="nofollow noreferrer" href="/to/?target=https://cdnJS.cloudflare.com/Ajax/libs/angular-material/1.1.19/angular-material.min.CSS">
  <link rel="stylesheet" class="url" target="_blank" rel="nofollow noreferrer" href="/to/?target=style.CSS">
</head>
<body ng-controller="myCtrl">
  <md-button class="md-rAIsed md-primary" ng-click="showConfirmDialog()">打开确认对话框</md-button>
  <script src="https://cdnJS.cloudflare.com/Ajax/libs/angular.JS/1.6.5/angular.min.JS"></script>
  <script src="https://cdnJS.cloudflare.com/Ajax/libs/angular-animate/1.6.5/angular-animate.min.JS"></script>
  <script src="https://cdnJS.cloudflare.com/Ajax/libs/angular-aria/1.6.5/angular-aria.min.JS"></script>
  <script src="https://cdnJS.cloudflare.com/Ajax/libs/angular-messages/1.6.5/angular-messages.min.JS"></script>
  <script src="https://cdnJS.cloudflare.com/Ajax/libs/angular-material/1.1.19/angular-material.min.JS"></script>
  <script src="script.JS"></script>
</body>
</html>

Javascript
angular.module('myApp', ['ngMaterial'])
  .controller('myCtrl', function($scope, $mdDialog) {
    $scope.showConfirmDialog = function() {
      var confirm = $mdDialog.confirm()
        .title('确认对话框')
        .textContent('你确定要执行此操作吗？')
        .ok('确定')
        .cancel('取消');
      $mdDialog.show(confirm).then(function() {
        // 用户点击了确定按钮
        console.log('执行操作');
      }, function() {
        // 用户点击了取消按钮
        console.log('取消操作');
      });
    };
  });

：

通过使用Angular Material的mdDialog.confirm()方法和自定义templateUrl，我们可以方便地创建一个确认对话框，并根据用户的选择执行相应的操作。这种方式可以增加用户体验，确保用户意图，并提供更好的交互性。