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

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

Я пытаюсь добавить пользовательский html в свой swal, поэтому, когда я это делаю:

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?


angularjs sweetalert2
person William    schedule 27.04.2018    source источник
comment
Вы уверены, что библиотека вообще поддерживает эту функцию?   -  person Slava Utesinov    schedule 27.04.2018
comment
Я просмотрел код github.com/socialbase/angular-sweetalert-2, и это просто порт для SweetAlert2 на AngularJS 1.x, поэтому я предположил, что эта библиотека будет работать с AngularJS внутри нее, но может случиться так, что она не поддерживается.   -  person William    schedule 27.04.2018

Ответы (1)


arrow_upward
1
arrow_downward

Посмотрите на код этой библиотеки:

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

Как видите, "портирования" на angular очень мало, это всего лишь оболочка для простой библиотеки JS.

Следовательно, просто невозможно вставить свой специфичный для angular код в виде 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;
  });
});
person Ovidiu Dolha    schedule 27.04.2018
comment
Это был просто пример, мне нужно поместить карусель изображений внутри swal. - person William; 27.04.2018
comment
@William и я объяснили, почему это не может работать, и возможный обходной путь для вашего вопроса об использовании ng-model - если ваш вопрос на самом деле отличается, я предлагаю вам создать новый, решающий точную проблему (например, создание диалога с пользовательским шаблоном angular привязан к данному контроллеру) - person Ovidiu Dolha; 27.04.2018