it-swarm.com.ru

Диалог подтверждения при нажатии ng - AngularJS

Я пытаюсь установить диалоговое окно подтверждения для ng-click, используя пользовательскую директиву angularjs:

app.directive('ngConfirmClick', [
    function(){
        return {
            priority: 1,
            terminal: true,
            link: function (scope, element, attr) {
                var msg = attr.ngConfirmClick || "Are you sure?";
                var clickAction = attr.ngClick;
                element.bind('click',function (event) {
                    if ( window.confirm(msg) ) {
                        scope.$eval(clickAction)
                    }
                });
            }
        };
}])

Это прекрасно работает, но, к сожалению, выражения внутри тега с использованием моей директивы не оцениваются:

<button ng-click="sayHi()" ng-confirm-click="Would you like to say hi?">Say hi to {{ name }}</button>

(имя не оценивается в этом случае). Кажется, это связано с терминальным параметром моей директивы. Есть ли у вас идеи обойти?

Чтобы проверить мой код: http://plnkr.co/edit/EHmRpfwsgSfEFVMgRLgj?p=preview

81
poiuytrez

Если вы не возражаете против использования ng-click, все работает хорошо. Вы можете просто переименовать его во что-то другое и по-прежнему читать атрибут, избегая при этом повторной активации обработчика щелчков дважды.

http://plnkr.co/edit/YWr6o2?p=preview

Я думаю, что проблема terminal указывает другим директивам не запускаться. Привязка данных с {{ }} - это просто псевдоним для директивы ng-bind, которая предположительно отменяется terminal

89
mikel

Чистый директивный подход.

Обновление: старый ответ (2014)

Он в основном перехватывает событие ng-click, отображает сообщение, содержащееся в директиве ng-confirm-click="message", и просит пользователя подтвердить. Если нажать кнопку подтверждения, выполняется обычный ng-click, если нет, сценарий завершается и ng-click не запускается.

<!-- index.html -->
<button ng-click="publish()" ng-confirm-click="You are about to overwrite your PUBLISHED content!! Are you SURE you want to publish?">
  Publish
</button>
// /app/directives/ng-confirm-click.js
Directives.directive('ngConfirmClick', [
  function(){
    return {
      priority: -1,
      restrict: 'A',
      link: function(scope, element, attrs){
        element.bind('click', function(e){
          var message = attrs.ngConfirmClick;
          // confirm() requires jQuery
          if(message && !confirm(message)){
            e.stopImmediatePropagation();
            e.preventDefault();
          }
        });
      }
    }
  }
]);

Код кредита для Zach Snow: http://zachsnow.com/#!/blog/2013/confirming-ng-click/

Обновление: новый ответ (2016)

1) Изменен префикс с 'ng' на 'mw', поскольку первый ('ng') зарезервирован для собственных угловых директив.

2) Модифицированная директива для передачи функции и сообщения вместо перехвата события ng-click.

3) Добавлено по умолчанию "Вы уверены?" сообщение в том случае, если пользовательскому сообщению не предоставлено mw-verify-click-message = "".

<!-- index.html -->
<button mw-confirm-click="publish()" mw-confirm-click-message="You are about to overwrite your PUBLISHED content!! Are you SURE you want to publish?">
  Publish
</button>
// /app/directives/mw-confirm-click.js
"use strict";

var module = angular.module( "myApp" );
module.directive( "mwConfirmClick", [
  function( ) {
    return {
      priority: -1,
      restrict: 'A',
      scope: { confirmFunction: "&mwConfirmClick" },
      link: function( scope, element, attrs ){
        element.bind( 'click', function( e ){
          // message defaults to "Are you sure?"
          var message = attrs.mwConfirmClickMessage ? attrs.mwConfirmClickMessage : "Are you sure?";
          // confirm() requires jQuery
          if( confirm( message ) ) {
            scope.confirmFunction();
          }
        });
      }
    }
  }
]);
56
mikeborgh

Для меня https://www.w3schools.com/js/js_popup.asp диалоговое окно подтверждения по умолчанию браузера работало очень хорошо. только что попробовал это:

$scope.delete = function() {
    if (confirm("sure to delete")) {
        // todo code for deletion
    }
};

Просто.. :)
Но я думаю, что вы не можете настроить его. Он появится с кнопкой «Отмена» или «ОК».

Правка:

Если вы используете ионную платформу, вам нужно использовать диалоговое окно ionicPopup, как показано в:

// A confirm dialog


$scope.showConfirm = function() {
   var confirmPopup = $ionicPopup.confirm({
     title: 'Delete',
     template: 'Are you sure you want to delete this item?'
   });

   confirmPopup.then(function(res) {
     if(res) {
       // Code to be executed on pressing ok or positive response
       // Something like remove item from list
     } else {
       // Code to be executed on pressing cancel or negative response
     }
   });
 };

Для более подробной информации смотрите: $ ionicPopup

45
Kailas

Это так просто, используя core javascript + angular js:

$scope.delete = function(id) 
    { 
       if (confirm("Are you sure?"))
           {
                //do your process of delete using angular js.
           }
   }

Если вы нажмете ОК, тогда будет выполнена операция удаления, в противном случае не . * Id - это параметр записи, которую вы хотите удалить.

9
VBMali

Вы не хотите использовать terminal: false, потому что именно это блокирует обработку внутри кнопки. Вместо этого в вашем link очистите attr.ngClick, чтобы предотвратить поведение по умолчанию.

http://plnkr.co/edit/EySy8wpeQ02UHGPBAIvg?p=preview

app.directive('ngConfirmClick', [
  function() {
    return {
      priority: 1,
      link: function(scope, element, attr) {
        var msg = attr.ngConfirmClick || "Are you sure?";
        var clickAction = attr.ngClick;
        attr.ngClick = "";
        element.bind('click', function(event) {
          if (window.confirm(msg)) {
            scope.$eval(clickAction)
          }
        });
      }
    };
  }
]);
5
Stepan Riha

На сегодняшний день это решение работает для меня:

/**
 * A generic confirmation for risky actions.
 * Usage: Add attributes: ng-really-message="Are you sure"? ng-really-click="takeAction()" function
 */
angular.module('app').directive('ngReallyClick', [function() {
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {
            element.bind('click', function() {
                var message = attrs.ngReallyMessage;
                if (message && confirm(message)) {
                    scope.$apply(attrs.ngReallyClick);
                }
            });
        }
    }
}]);

Кредиты: https://Gist.github.com/asafge/7430497#file-ng-really-js

4
Nanu

Решение только для углов, которое работает вместе с ng-click, возможно, используя compile для переноса выражения ng-click.

Директива:

.directive('confirmClick', function ($window) {
  var i = 0;
  return {
    restrict: 'A',
    priority:  1,
    compile: function (tElem, tAttrs) {
      var fn = '$$confirmClick' + i++,
          _ngClick = tAttrs.ngClick;
      tAttrs.ngClick = fn + '($event)';

      return function (scope, elem, attrs) {
        var confirmMsg = attrs.confirmClick || 'Are you sure?';

        scope[fn] = function (event) {
          if($window.confirm(confirmMsg)) {
            scope.$eval(_ngClick, {$event: event});
          }
        };
      };
    }
  };
});

HTML:

<a ng-click="doSomething()" confirm-click="Are you sure you wish to proceed?"></a>
4
scarlz

Я создал модуль для этой самой вещи, который опирается на модальный сервис Angular-UI $.

https://github.com/Schlogen/angular-confirm

4
James Kleeh
    $scope.MyUpdateFunction = function () {
        var retVal = confirm("Do you want to save changes?");
        if (retVal == true) {
            $http.put('url', myData).
            success(function (data, status, headers, config) {
                alert('Saved');
            }).error(function (data, status, headers, config) {
                alert('Error while updating');
            });
            return true;
        } else {
            return false;
        }
    }

Кодекс говорит все

3
om471987

Пример кода HTML 5

<button href="#" ng-click="shoutOut()" confirmation-needed="Do you really want to
shout?">Click!</button>

Пример кодекса пользовательской директивы AngularJs

var app = angular.module('mobileApp', ['ngGrid']);
app.directive('confirmationNeeded', function () {
    return {
    link: function (scope, element, attr) {
      var msg = attr.confirmationNeeded || "Are you sure?";
      var clickAction = attr.ngClick;
      element.bind('click',function (e) {
        scope.$eval(clickAction) if window.confirm(msg)
        e.stopImmediatePropagation();
        e.preventDefault();
       });
     }
    };
});
1
Anil Singh

Диалог подтверждения может быть реализован с использованием AngularJS Material :

$ mdDialog открывает диалоговое окно поверх приложения, чтобы информировать пользователей о критических информации или требовать от них принятия решений. Есть два Подходы для настройки: простой API обещаний и обычный синтаксис объекта.

Пример реализации: угловой материал - диалоги

1
Justas

Если вы используете ui-router, кнопка отмены или принятия заменяет URL. Чтобы предотвратить это, вы можете возвращать false в каждом случае условного предложения, например:

app.directive('confirmationNeeded', function () {
  return {
    link: function (scope, element, attr) {
      var msg = attr.confirmationNeeded || "Are you sure?";
      var clickAction = attr.confirmedClick;
      element.bind('click',function (event) {
      if ( window.confirm(msg) )
        scope.$eval(clickAction);
      return false;
    });
  }
}; });
0
Juanma Jurado

Очень простое угловое решение

Вы можете использовать идентификатор с сообщением или без. Без сообщения появится сообщение по умолчанию.

Директива

app.directive('ngConfirmMessage', [function () {
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
            element.on('click', function (e) {
                var message = attrs.ngConfirmMessage || "Are you sure ?";
                if (!confirm(message)) {
                    e.stopImmediatePropagation();
                }
            });
        }
    }
}]);

Контроллер

$scope.sayHello = function(){
    alert("hello")
}

HTML

С сообщением

<span ng-click="sayHello()" ng-confirm-message="Do you want to say Hello ?" >Say Hello!</span>

Без сообщений

<span ng-click="sayHello()" ng-confirm-message>Say Hello!</span>
0
Merlin

Вот чистое и простое решение, использующее угловые обещания $q, $window и native .confirm() modal:

angular.module('myApp',[])
  .controller('classicController', ( $q, $window ) => {
    this.deleteStuff = ( id ) => {
      $q.when($window.confirm('Are you sure ?'))
        .then(( confirm ) => {
          if ( confirm ) {
            // delete stuff
          }
        });
    };
  });

Здесь я использую синтаксис controllerAs и функции стрелок ES6, но он также работает в простом старом ES5.

0
Freezystem

Удалить всплывающее окно подтверждения с помощью начальной загрузки в angularjs

очень просто .. У меня есть одно решение для этого с использованием всплывающего окна конформации начальной загрузки . Здесь я предоставлен 

<button ng-click="deletepopup($index)">Delete</button>

во всплывающей модели загрузчика:

<div class="modal-footer">
  <a href="" data-dismiss="modal" ng-click="deleteData()">Yes</a>
  <a href="" data-dismiss="modal">No</a>
</div>

jS

var index=0;
$scope.deleteData=function(){
    $scope.model.contacts.splice(index,1);
}
// delete a row 
$scope.deletepopup = function ($index) {
    index=$index;
    $('#myModal').modal('show');
};

когда я нажимаю кнопку «Удалить», откроется всплывающее окно «Подтверждение удаления», а при нажатии кнопки «Да» строка удаляется. 

0
Rama Krishna