Использование Sweetalert 2 с пользовательским HTML и AngularJS

Question

Я использую SweetAlert2 с AngularJS, используя этот порт для AngularJS 1.x: https://github.com/socialbase/angular-sweetalert-2.

Я пытаюсь добавить несколько пользовательских 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

Как видите, очень мало "портирования", связанного с углом, это просто оболочка для библиотеки plain-JS.

Поэтому просто невозможно вставить свой угловой код в виде HTML и ожидать, что он будет работать.

Однако, взглянув на примеры кода lib , вы можете прочитать значения ввода 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;
  });
});