Using sweetalert 2 with custom html and AngularJS

问题

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

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

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.

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

回答1:

Look at the code for this lib:

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

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

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

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

来源：https://stackoverflow.com/questions/50061289/using-sweetalert-2-with-custom-html-and-angularjs

标签

angularjs

sweetalert2