以角度材质对话框关闭传递数据 - Javascript

在AngularJS中，材质对话框是一个非常有用的工具，用于与用户进行交互并显示信息。我们可以在框内呈现一些表单字段，以便用户向我们提供信息，然后我们可以在提交后收集这些信息。有时，我们需要在关闭对话框时将数据传递回控制器，在本文中，我们将学习如何在关闭对话框时传递数据。

创建控制器和材质对话框

首先，我们需要在AngularJS应用程序中创建一个控制器，并实现材质对话框使用的样式和逻辑。我们可以使用AngularJS的内置材质组件和指令来创建对话框，如下所示：

<md-dialog aria-label="This is a dialog">
  <md-dialog-content>

    <h2>材料对话框</h2>

    <form name="myForm">
      <md-input-container>
        <label>名字</label>
        <input ng-model="user.name">
      </md-input-container>
      <md-input-container>
        <label>姓</label>
        <input ng-model="user.surname">
      </md-input-container>
    </form>

  </md-dialog-content>
  <md-dialog-actions>
    <md-button ng-click="cancel()">取消</md-button>
    <md-button ng-click="answer(user)">保存</md-button>
  </md-dialog-actions>
</md-dialog>

在上面的代码中，我们创建了一个材质对话框，其中包含一个表单，用户可以在其中输入数据。我们还在“md-dialog-actions”中添加了两个按钮：“取消”和“保存”。使用ng-click指令，我们将这些按钮绑定到控制器方法，以便在单击按钮时触发相应的行为。

控制器代码

在上面的HTML中，我们添加了两个ng-click指令，这些指令将在单击按钮时调用控制器中的方法。我们需要在控制器中实现这些方法并将数据保存到某个变量中。以下是完整的控制器代码：

app.controller('MyController', function($scope, $mdDialog) {
  
  // 初始化用户对象
  $scope.user = {
    name: '',
    surname: ''
  };

  // 取消按钮
  $scope.cancel = function() {
    $mdDialog.cancel();
  };

  // 保存按钮
  $scope.answer = function(user) {
    $mdDialog.hide(user);
  };

});

在这个控制器中，我们实现了两个方法，一个用于取消按钮，另一个用于保存按钮。取消按钮只需要调用$mdDialog的cancel()方法关闭对话框。但是，保存按钮需要将数据传递回控制器。因此，我们调用$mdDialog的hide()方法，并将数据作为参数传递。在这里，我们传递了用户对象。

打开对话框

现在，我们已经创建了一个控制器和材质对话框，并让其与控制器交互。接下来，我们需要在应用程序中打开对话框。以下代码演示了如何使用$mdDialog服务打开对话框：

$scope.showDialog = function(ev) {

  $mdDialog.show({
    controller: 'MyController',
    templateUrl: 'dialog.html',
    targetEvent: ev,
  }).then(function(answer) {
    // 处理答案
  }, function() {
    // 关闭对话框时的回调
  });

};

在这个控制器中，我们定义了一个showDialog()方法。在这个方法中，我们使用$mdDialog服务的show()方法打开对话框。这个方法接受一个对象作为参数，其中包含控制器和HTML模板的信息。我们还传递了一个目标事件对象（ev），以便在打开对话框时指定位置。

show()方法返回一个promise对象，因此我们可以在对话框关闭时执行相应的处理操作。在这里，我们使用.then()方法处理答案。

处理答案

在对话框关闭后，我们需要处理答案。我们可以通过以下方式访问答案对象：

.then(function(answer) {
  // 处理答案
}, function() {
  // 关闭对话框时的回调
});

在.then()方法中，我们可以获得数据对象。在前面的控制器中，我们将用户对象传递给$mdDialog的hide()方法。在这里，我们可以访问这个对象并进行相应的处理操作。

总结

在AngularJS中，通过材质对话框向用户显示信息并收集用户输入数据是常见的任务。通过使用$mdDialog服务和相应的指令和组件，我们可以轻松地创建对话框，并使用promise接口在对话框关闭时传递数据。