将Sweetalert 2与自定义html和AngularJS结合使用 [英] Using sweetalert 2 with custom html and AngularJS

问题描述

我正在将 SweetAlert2 与AngularJS一起使用，并通过AngularJS 1.x使用此端口: https://github.com/socialbase/angular-sweetalert-2 .

I am using SweetAlert2 with AngularJS, using this port to AngularJS 1.x : https://github.com/socialbase/angular-sweetalert-2.

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

I am trying to add some custom html in my swal, so when I do this:

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模式代码放在我的html代码中的 ng-controller 之外.

It binds the html correctly, but it isn't binding ng-model using my variable test. Apparently it is putting the swal modal code outside my ng-controller in my html code.

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

How can I make my variable test work with AngularJS and SweetAlert?

推荐答案

查看此lib的代码:

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

您可以看到几乎没有与角度相关的端口"，它只是纯JS库的包装.

As you can see there is very little angular-related "porting", it's just a wrapper to the plain-JS library.

因此，根本无法将特定于角度的代码作为html放入并期望它能正常工作.

Therefore, it's simply not possible to put in your angular-specific code as a html and expect it to work.

但是，查看此 lib的代码示例，您可以在关闭对话框后读取html输入的值

However, looking at this lib's code examples, you could read html input's values after the dialog is closed.

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结合使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！