Xóa tùy chỉnh xác nhận trong angularJS

Question

Tôi có ứng dụng góc với danh sách các mục. Tôi đang cố triển khai phương thức "Xác nhận xóa" tùy chỉnh, để khi người dùng nhấp vào nút "Xóa" bên cạnh một mục, phương thức được mở để xác nhận xóa. Khi nhấp vào "Có", một hàm deleteItem() được kích hoạt. Vấn đề của tôi là máy chủ trả về 404 không tìm thấy cho yêu cầu xóa. Nó hoạt động khi tôi sử dụng hộp thoại xác nhận jquery tiêu chuẩn, vì vậy tôi đoán ID mục không được chuyển qua phương thức cho hàm xóa. có ai giúp được không?

<div class="span6"> 
     <table class="table table-striped table-condensed"> 
      <thead> 
      <tr> 
       <th style="min-width: 80px;">Name:</th> 
       <th style="width:20px;"> </th> 
       <th style="width:20px;"> </th> 
      </tr> 
      </thead> 
      <tbody> 
      <tr ng-repeat="item in items | filter:query | orderBy:orderProp"> 
       <td>{{ item.name }}</td> 


       <td><a ng-click="editItem(item.id)" class="btn btn-small btn-primary">Edit</a></td> 
       <td><a ng-click="openModal(item.id)" class="btn btn-small btn-success">Delete</a></td> 

      </tr> 
      </tbody> 
     </table> 

      <modal-dialog show='modalShown' id = "itemModal" width='300px' height='40%'> 
        <p>Are you sure you want to delete this item?<p> 
         <button ng-click = "deleteItem(item.id)" class = "link">Yes</button> 
      </modal-dialog> 

    </div> 

Dưới đây là bộ điều khiển:

angular.module('myApp.controllers') 
    .controller('ItemCtrl', ['$scope', 'ItemsFactory', 'ItemFactory', '$location', '$route', 
     function ($scope, ItemsFactory, ItemFactory, $location, $route) { 

      $scope.modalShown = false; 

     //callback for ng-click 'deleteItem': 

      $scope.openModal = function (itemId) { 
       $scope.modalShown = !$scope.modalShown; 

      }; 

     //callback for ng-click 'deleteItem': 

      $scope.deleteItem = function (itemId) { 

       ItemFactory.delete({ id: itemId }).$promise.then(function (items){ 
        $scope.items = items; 
        $location.path('/items'); 
        $route.reload(); 
       }, function (err) { 
        console.error(err); 
       });  

       // } 

      }; 

Answer 1

Các item chỉ là "biết" bên trong phạm vi được tạo ra bởi ngRepeat cho mỗi phần tử.
<modal-dialog> không nằm trong phạm vi đó và không có kiến ​​thức về item.

Bạn có thể cấu trúc lại các mã như thế này:

// In HTML: 
<modal-dialog ...> 
    ... 
    <button ng-click="deleteItem()" ... 

// In controller: 
$scope.modalShown = false; 
$scope.itemToDeleteId; 
... 
$scope.openModal = function (itemId) { 
    $scope.itemToDeleteId = itemId; 
    $scope.modalShown = true; 
}; 
... 
$scope.deleteItem = function() { 
    if (!$scope.itemToDeleteId) { return; } 
    var itemId = $scope.itemToDeleteId; 
    $scope.itemToDeleteId = null; 
    ... 

Answer 2

Tôi đã dành thời gian về vấn đề này, nhưng tôi muốn làm tất cả trong một cú nhấp chuột (giống như một hộp thoại xác nhận cửa sổ thông thường). Nó bắt đầu với câu hỏi "How do I intercept ng-click in angularJS?"

Tôi đã phát triển một chỉ thị và dịch vụ hoạt động với UI Bootstrap Modal để tạo một hộp thoại phương thức xác nhận hành động ng-click trước khi tiếp tục.

Demo on Plunker hoặc ở đây:

/* 
Confirm an ng-click action with a modal dialog window (requires UI Bootstrap Modal service) 
Using this modal requires two things: apply the attribute to the dom element and prepend 
the confirmClick() action to the ng-click attribute. 

    <a href="#" ng-click="confirmClick() && deleteItem(item)" confirm-click>Delete</a> 

*/ 
.directive('confirmClick', ['$q', 'dialogModal', function($q, dialogModal) { 
    return { 
     link: function (scope, element, attrs) { 
      // ngClick won't wait for our modal confirmation window to resolve, 
      // so we will grab the other values in the ngClick attribute, which 
      // will continue after the modal resolves. 
      // modify the confirmClick() action so we don't perform it again 
      // looks for either confirmClick() or confirmClick('are you sure?') 
      var ngClick = attrs.ngClick.replace('confirmClick()', 'true') 
       .replace('confirmClick(', 'confirmClick(true,'); 

      // setup a confirmation action on the scope 
      scope.confirmClick = function(msg) { 
       // if the msg was set to true, then return it (this is a workaround to make our dialog work) 
       if (msg===true) { 
        return true; 
       } 
       // msg can be passed directly to confirmClick('are you sure?') in ng-click 
       // or through the confirm-click attribute on the <a confirm-click="Are you sure?"></a> 
       msg = msg || attrs.confirmClick || 'Are you sure?'; 
       // open a dialog modal, and then continue ngClick actions if it's confirmed 
       dialogModal(msg).result.then(function() { 
        scope.$eval(ngClick); 
       }); 
       // return false to stop the current ng-click flow and wait for our modal answer 
       return false; 
      }; 
     } 
    } 
}]) 

/* 
Open a modal confirmation dialog window with the UI Bootstrap Modal service. 
This is a basic modal that can display a message with okay or cancel buttons. 
It returns a promise that is resolved or rejected based on okay/cancel clicks. 
The following settings can be passed: 

    message   the message to pass to the modal body 
    title   (optional) title for modal window 
    okButton  text for OK button. set false to not include button 
    cancelButton text for Cancel button. ste false to not include button 

*/ 
.service('dialogModal', ['$modal', function($modal) { 
    return function (message, title, okButton, cancelButton) { 
     // setup default values for buttons 
     // if a button value is set to false, then that button won't be included 
     okButton = okButton===false ? false : (okButton || 'Confirm'); 
     cancelButton = cancelButton===false ? false : (cancelButton || 'Cancel'); 

     // setup the Controller to watch the click 
     var ModalInstanceCtrl = function ($scope, $modalInstance, settings) { 
      // add settings to scope 
      angular.extend($scope, settings); 
      // ok button clicked 
      $scope.ok = function() { 
       $modalInstance.close(true); 
      }; 
      // cancel button clicked 
      $scope.cancel = function() { 
       $modalInstance.dismiss('cancel'); 
      }; 
     }; 

     // open modal and return the instance (which will resolve the promise on ok/cancel clicks) 
     var modalInstance = $modal.open({ 
      template: '<div class="dialog-modal"> \ 
       <div class="modal-header" ng-show="modalTitle"> \ 
        <h3 class="modal-title">{{modalTitle}}</h3> \ 
       </div> \ 
       <div class="modal-body">{{modalBody}}</div> \ 
       <div class="modal-footer"> \ 
        <button class="btn btn-primary" ng-click="ok()" ng-show="okButton">{{okButton}}</button> \ 
        <button class="btn btn-warning" ng-click="cancel()" ng-show="cancelButton">{{cancelButton}}</button> \ 
       </div> \ 
      </div>', 
      controller: ModalInstanceCtrl, 
      resolve: { 
       settings: function() { 
        return { 
         modalTitle: title, 
         modalBody: message, 
         okButton: okButton, 
         cancelButton: cancelButton 
        }; 
       } 
      } 
     }); 
     // return the modal instance 
     return modalInstance; 
    } 
}]) 

Answer 3

Một chỉ tùy chỉnh:

/** 
* A generic confirmation for risky actions. 
* Usage: Add attributes: ng-really-message="Really?" 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); 
       } 
      }); 
     } 
    } 
}]);