如何刷新視圖無需刷新頁面在angularjs應用

我有一個簡單的應用程序，其中列出接觸報告，在裏面我做了從Mongolab獲取數據的列表視圖。如何刷新視圖無需刷新頁面在angularjs應用

在那我還做了一個輸入表單提交

我在控制器中使用函數從角的例子爲藍本在其網站上時，使列表中的一個新的聯繫人報告：

app.factory('Contact',function($mongolabResource){ 
    return $mongolabResource('contacts'); 
}); 

function ContactCreateCtrl($scope,$location,Contact) { 
Contact.save(contact,function(){ 
     $location.path('/'); 
    }); 
};

$ location.path（）是重新加載頁面的回調。

當數據被提交（.save（）是成功的）視圖重載無刷新頁面我如何重寫這個讓？

我嘗試刪除，然後重新定義數組，但似乎沒有工作：

Contact.save(contact,function(){ 
     delete $scope.contacts; 
     $scope.contacts = Contact.query(); 
    });

我想實現這個的刪除功能以及。有人能指出我在哪裏可以學到這一點嗎？

任何幫助

來源

2013-01-05 George Ananda Eman

爲什麼你需要重新加載視圖？ –

所以我的列表顯示了新添加的項目，現在它通過執行$ location.path（）來實現它。如果我刪除列表不會更新，但當我手動重新加載瀏覽器，它顯示新項目 –

即時通訊更順暢的應用程序體驗沒有頁面重新加載 –

好吧，我更新了你的小提琴從數據庫中獲取的值：http://jsfiddle.net/joshdmiller/Y223F/2/。

app.controller('MainCtrl', function ($scope,Contact) { 
    $scope.updateContacts = function() { 
    Contact.query(function(data) { 
     $scope.contacts = data; 
    }); 
    }; 

    $scope.save = function(newContact) { 
    Contact.save(newContact, function() { 
     $scope.updateContacts(); 
    }); 
    }; 

    // The initial data load 
    $scope.updateContacts(); 
});

有兩點需要注意：

（1）我把你的蒙戈查詢到功能，使得它可以被稱爲當再次創造了新的記錄;

（2）$ mongolabResource預計要在成功執行的回調;你的應用程序閃爍，因爲你沒有提供。換句話說，從您調用查詢到完成時間獲取的時間，您的列表是空的。相反，我們希望它在我們獲得新數據時僅更改。我也改變了。

在手動添加項目或從數據庫中獲取的方面，最好的做法是根據使用情況和存在權衡。但對於這樣的小數據，只需從數據庫中獲取。

來源

2013-01-05 21:15:22

啊我看到了，沒有跨越我的想法，使其功能。 thx Josh –

@MarkRajcok我知道它的工作原理;但正如我所說，它會導致閃爍。這是與刪除回調和直接分配的值相同的小提琴：http://jsfiddle.net/joshdmiller/Y223F/3/。直接分配對於初始檢索可能是一個有用的技巧，但除此之外，它會降低用戶體驗。 –

對不起@Josh，我沒有仔細閱讀你的答案。我刪除了我的評論（在您回覆之前）。你擁有的肯定更好（+1）。 –

，不勝感謝得到這個工作，但仍不能確定推到數組的範圍，效果會更好，如果我們能夠從數據庫

function ContactCreateCtrl($scope,$location,Contact) { 
    Contact.save(contact,function(){ 
    $scope.contacts.push(contact); 
});

另外我想取需要由db自動生成的_id對象，用於鏈接目的。這種方法不給我的_id，任何見解？

來源

2013-01-05 21:01:36

我分享我的答案我如何使用火力身份驗證服務標誌清除後的數據視圖出從火力點。登錄方法呼叫$scope.currentUser = null;後，數據仍然存在。必須重新加載以查看數據更改。不是最好的UX。

$scope.getCurrentUser = function() { 
     firebase.auth().onAuthStateChanged(function(user) { 
      if (user) { 
       // User is signed in. 
       $scope.currentUser = user; 
      } else { 
       // No user is signed in. 
       $scope.currentUser = null; 
       console.log('user not signed in.'); 
      } 
     }); 
    } 

$scope.getCurrentUser(); 


$scope.signout = function() { 
     firebase.auth().signOut().then(function() { 
      // Sign-out successful. 
      console.log('signed out success'); 
      $scope.getCurrentUser(); 
     }, function(error) { 
      // An error happened. 
      console.log(error); 
     }); 

    }

所以調用getUserData方法和使currentUser = NULL有更新，而不重新加載的圖。這是一個使用Firebase的例子，但只需稍作調整，它可能適用於從視圖中清除數據而無需整頁重新加載的需求。Firebase在這裏完成了清除用戶對象的工作，但我的視圖並不關心，直到再次檢查我的getCurrentUser方法以查看是否仍有用戶，如果不是，則在$ scope中清除它而不重新加載視圖。

來源

2017-02-02 19:05:19

如何刷新視圖無需刷新頁面在angularjs應用

回答

相關問題