使用Angularjs删除后刷新联系人列表答案

【问题标题】：Refresh List Of Contacts After Delete With Angularjs使用Angularjs删除后刷新联系人列表
【发布时间】：2015-06-22 02:34:17
【问题描述】：

您好，AngularJs 的新手。

我想在联系人详细信息屏幕中按删除按钮。紧接着，当按下删除按钮时，我想返回主联系人列表并刷新联系人列表。（删除了刚刚删除的联系人）。

现在联系人被删除...但是如果我去运行该功能

$state.go('contactLijst');

它会回到主页面...但是我仍然需要刷新页面！

这是我的控制器：

(function(){
    "use strict";

    angular
        .module("lesAmis")
        .controller("PersoonEditController",
        ["contact","$state",   
         PersoonEditController]);

     function PersoonEditController(contact,people,$state){
         var vm = this;
         vm.people = people;
         vm.contact = contact;

vm.delete = function(){
              var id = vm.contact.id;
              if (id) {
                vm.contact.$delete({id:id}, function(data) {
                 toastr.success("OK, persoon verwijderd <br />" + 
                     data.naam);});

                $state.go('contactLijst');}

         };

我的 app.js

.state("persoonEdit", {
                    abstract: true,
                    url: "/personen/edit/:id",
                    templateUrl: "app/contacten/contactEditView.html",
                    controller: "PersoonEditController as vm",
                    resolve:{
                        contactResource: "contactResource",
                        contact: function(contactResource, $stateParams){
                            var id = $stateParams.id;
                            return contactResource.get({id: id}).$promise;
                        }
                    }
                })

html 中的按钮：

button class="btn btn-default"
                            style="width:70px;" 
                            ng-click="vm.delete()">Verwijder
                    </button>

我想我需要刷新我的控制器。但没有任何工作。有什么建议吗？

【问题讨论】：

标签： javascript json angularjs html angularjs-ng-repeat

【解决方案1】：

在您的控制器中，尝试移动您的

$state.go('contactLijst');

在 function(data) {} 函数内部。

只有在 remove 调用完成执行后，这才会将您重定向回您的主页。目前，控制器触发删除联系人的请求，然后立即将您路由回主页（由于 JavaScript 的异步特性）。

希望这会有所帮助！

【讨论】：

由于某种原因，如果我这样做，我将无法再访问 $state 参数...即使在该函数中将其作为参数也不起作用:( $state 未定义 :(

【解决方案2】：

知道了！！改变了两件事！

先有这个：

(function(){
    "use strict";

    angular
        .module("lesAmis")
        .controller("PersoonEditController",
        ["contact","$state",   
         PersoonEditController]);

     function PersoonEditController(contact,people,$state){

当然，我只有一个参数！ 'people' 参数。

所以现在是：

(function(){
    "use strict";

    angular
        .module("lesAmis")
        .controller("PersoonEditController",
        ["contact","$state",   
         PersoonEditController]);

     function PersoonEditController(contact, $state){

现在我的删除功能需要一个特殊的命令！是$state.reload();

这是我的新删除功能：

  vm.delete = function(){
      var id = vm.contact.id;
      if (id) {
        vm.contact.$delete({id:id}, function(data) {
            $state.reload();
            toastr.success("OK, persoon verwijderd");
            $state.go('contactLijst');});

 }};

问题解决了！

【讨论】：

【解决方案3】：

使用 JavaScript Array splice() 方法。

【讨论】：