javascript - 将 SweetAlert2 与 Angular 一起使用时如何保持范围？

Question

当我尝试添加SweetAlert2时对于我的 Angular 删除按钮，它会阻止范围更新模型。可以同时使用它们吗？

Shown here in this Plunker (请确保先添加项目，然后才能在示例中删除)

使用 SweetAlert 的代码不起作用(当我确认时没有任何反应):

function fieldToolsController($scope, ParticipantFactory) {
  var model = this;
  model.participant = ParticipantFactory;
  model.participant.hasRoles = model.participant.roles.length > 0;

  model.deleteSelectedRole = function () {
    for (var i = 0; i < model.participant.roles.length; i++) {
      if (model.participant.roles[i] === model.participant.selected) {

        swal({
          title: 'Are you sure?',
          text: "You won't be able to revert this!",
          type: 'warning',
          showCancelButton: true,
          confirmButtonColor: '#3085d6',
          cancelButtonColor: '#d33',
          confirmButtonText: 'Yes, delete it!'
        }).then(function () {

          //=============================
          //LOSES SCOPE HERE OR SOMETHING
          //=============================
          model.participant.roles.splice(i, 1);
          model.participant.hasRoles = model.participant.roles.length > 0;
          if (model.participant.hasRoles) {
            model.participant.selected = model.participant.roles[0];
          }
          return;
          //=============================
          //=============================
          //=============================

        });

      }
    }
  };
}

下面是与普通 javascript 警报一起正常工作的相同函数:

And the plunker

function fieldToolsController($scope, ParticipantFactory) {
  var model = this;
  model.participant = ParticipantFactory;
  model.participant.hasRoles = model.participant.roles.length > 0;

  model.deleteSelectedRole = function () {
    for (var i = 0; i < model.participant.roles.length; i++) {
      if (model.participant.roles[i] === model.participant.selected) {

        var c = confirm("Are you sure?");
        if(c){
          model.participant.roles.splice(i, 1);
          model.participant.hasRoles = model.participant.roles.length > 0;
          if (model.participant.hasRoles) {
            model.participant.selected = model.participant.roles[0];
          }
          return;

        }

      }
    }
  };
}

Answer 1

由于该函数稍后会执行(这是一个 promise )，因此您可能需要提供 model 变量作为注入(inject)参数。

在您的 .then 函数中，尝试将 model 变量注入(inject)其中，如下所示:

.then(function(model) {
    console.log(model)
});