AngularJS - 使用對話框刪除項目

Question

在我的AngularJS Web應用程序中，我有一個連接到Mongo DB的對象列表。我想讓用戶通過證明垃圾圖標來刪除它。 直到這裏沒有問題：點擊垃圾桶圖標時，項目消失。我的下一步是添加一個對話框，要求確認用戶真的想刪除它。這是我的問題。

當我點擊垃圾時，會出現詢問確認的對話框。當單擊「刪除」時，該對象不會被刪除，只有當您再次點擊它時，纔會刪除。

這裏的HTML：

<div ng-model="projects" ng-repeat='project in projects'> 
    <div class="list_projects"> 
     <i class="fa fa-file-o fa-2x"></i> {{project.project_name}} 
    </div> 

    <a ng-click="deleteDialog(project)"> 
     <i class="fa fa-trash-o fa-lg"></i> 
    </a> 

    <div id="dialog-confirm" title="Delete project" style="display: none;"> 
     <div> 
     Are you sure to delete "{{project.project_name}}" project? 
     </div> 
    </div> 
</div> 

這裏控制器：

// delete a project 
$scope.deleteProject = function() { 

    var delThis = $http.delete('https://api.mongolab.com/api/1/databases/timeman/collections/Projects/' + 
        $scope.proj._id.$oid, 
        { 
         params : { apiKey : apiKeyString } 
        }); 

    delThis.success(function(data, status, headers, config) { 
      $scope.getProjects(); 
    }); 

    delThis.error(function(data, status, headers, config) { 
     throw new Error("Something got wrong with delete"); 
    }); 
}; 

    $scope.deleteDialog = function(proj) { 
     $scope.proj = proj; 
     $("#dialog-confirm").dialog({ 
      resizable: false, 
      height: 160, 
      modal: true, 
      buttons: { 
       Delete: function() { 
        $scope.deleteProject(); 
        $scope.proj = null; 
        $scope.projpos = -1; 
        $scope.projForm.$setPristine(); 
        $(this).dialog("close"); 
       }, 
       Cancel: function() { 
        $(this).dialog("close"); 

       } 
     } 
    }); 
    }; 

我希望我是清楚的，給了足夠的信息，我已瞭解的問題。如果情況並非如此，我會請提供更多細節。謝謝！

Answer 1

試着用Delete: function()和$apply()來調用摘要循環。喜歡的東西：

Delete: function() { 
       $scope.$apply(function(){ 
        $scope.deleteProject(); 
        $scope.proj = null; 
        $scope.projpos = -1; 
        $scope.projForm.$setPristine(); 
        $(this).dialog("close"); 
       });      
      }, 

或$(this).dialog("close");一行之後撥打：$scope.$apply()。

但我更喜歡使用第一種選擇

作爲一個側面說明

儘量把所有的DOM操作/更新（$("#dialog-confirm").dialog）插入指令，但不控制器（用於更好的設計）。