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。显然它是在我的html代码中将swal模态代码放在ng-controller之外。

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

Answer 1

查看此lib的代码：

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;
  });
});

将sweetalert 2与自定义html和AngularJS

1 个答案: