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）置于指令中但不在控制器中（为了更好的设计）。

AngularJS - 使用对话框删除项目

1 个答案: