使用带有自定义 html 和 AngularJS 的 sweetalert 2

Question

我将SweetAlert2 与 AngularJS 一起使用，将此端口用于 AngularJS 1.x：https://github.com/socialbase/angular-sweetalert-2。

我正在尝试在我的 swal 中添加一些自定义 html，所以当我这样做时：

angular.module('app').controller('TestController', function($scope, SweetAlert) {
  $scope.test = "My test";

    SweetAlert.swal({
      type: 'warning',
      html: '<input type="text" ng-model="test">'
    }).then(function() {
    });
  });

它正确绑定了 html，但没有使用我的变量 test 绑定 ng-model。显然，它将 swal 模态代码放在我的 ng-controller 之外的我的 html 代码中。

如何使我的变量 test 与 AngularJS 和 SweetAlert 一起使用？

Answer 1

查看这个库的代码：

https://github.com/socialbase/angular-sweetalert-2/blob/master/lib/angular-sweetalert2.js

正如您所见，与角度相关的“移植”很少，它只是普通 JS 库的包装器。

因此，根本不可能将特定于角度的代码作为 html 放入并期望它能够工作。

但是，查看此lib's code examples，您可以在对话框关闭后读取 html 输入的值。

angular.module('app').controller('TestController', function($scope, SweetAlert) {
  $scope.test = "My test";

  SweetAlert.swal({
    type: 'warning',
    html: '<input id="swal-input" type="text" ng-model="test">',
    preConfirm: function() {
      return document.getElementById('swal-input').value;
    }
  })
  .then(function(value) {
    $scope.test = value;
  });
});