angularjs - 使用带有自定义 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，但没有ng-model使用我的变量绑定test。显然，它将 swal 模态代码放在我ng-controller的 html 代码中。

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

Answer 1

查看此库的代码：

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

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

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

但是，查看这个库的代码示例，您可以在对话框关闭后读取 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;
  });
});