Javascript 如何在 angularjs 应用程序中刷新视图而不刷新页面
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14175658/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to refresh view without refreshing page in an angularjs app
提问by George Ananda Eman
I have a simple app that lists contact reports, in it i made a list view that fetches data from Mongolab.
我有一个简单的应用程序，它列出了联系人报告，在其中我制作了一个从 Mongolab 获取数据的列表视图。
On that i also made an input form that makes a new contact report in the list when submitted
我还制作了一个输入表单，在提交时在列表中生成一个新的联系人报告
the function i use in the controller is modelled from angular's example on their site :
我在控制器中使用的功能是根据他们网站上的 angular 示例建模的：
app.factory('Contact',function($mongolabResource){
return $mongolabResource('contacts');
});
function ContactCreateCtrl($scope,$location,Contact) {
Contact.save(contact,function(){
$location.path('/');
});
};
the $location.path() is the callback that reloads the page.
$location.path() 是重新加载页面的回调。
how do i rewrite this so that when the data has been submitted ( .save() is successful ) the view reloads without the page reloading?
我如何重写它，以便在提交数据时（ .save() 成功）视图重新加载而不重新加载页面？
i tried deleting and then redefining the array but doesnt seem to work :
我尝试删除然后重新定义数组，但似乎不起作用：
Contact.save(contact,function(){
delete $scope.contacts;
$scope.contacts = Contact.query();
});
i would like to implement this on the delete function as well. Can somebody point me to where i can learn this?
我也想在删除功能上实现这一点。有人可以指出我可以在哪里学习吗？
Much thanks for any help
非常感谢您的帮助
回答by Josh David Miller
Okay, I updated your fiddle to fetch the value from the database: http://jsfiddle.net/joshdmiller/Y223F/2/.
好的，我更新了您的小提琴以从数据库中获取值：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();
});
Two things to note:
有两点需要注意：
(1) I moved your Mongo query into a function so that it can be called again when the new record is created;
(1) 我将你的 Mongo 查询移动到一个函数中，以便在创建新记录时可以再次调用它；
(2) the $mongolabResource expects a callback to be executed on success; your app flickered because you didn't provide one. In other words, from the time you called the query to the time fetch was complete, your list was empty. Instead, we want it to change onlywhen we get the new data. I changed that too.
(2) $mongolabResource 期望成功时执行回调；您的应用程序闪烁，因为您没有提供。换句话说，从您调用查询到提取完成，您的列表是空的。相反，我们希望它只有在我们获得新数据时才会改变。我也是这样改的。
In terms of adding the item manually or fetching from the database, best practice is based on the use case and there are trade-offs. But for small data such as this, just fetch from the DB.
在手动添加项目或从数据库中获取项目方面，最佳实践基于用例并且存在权衡。但是对于像这样的小数据，只需从数据库中获取。
回答by George Ananda Eman
got this to work, but still not sure about pushing into the array at the scope, would be better if we could fetch from database
让它工作，但仍然不确定是否在范围内推入数组，如果我们可以从数据库中获取会更好
function ContactCreateCtrl($scope,$location,Contact) {
Contact.save(contact,function(){
$scope.contacts.push(contact);
});
also i would need the _id object thats automatically generated by the db, for linking purposes. this method doesnt give me the _id, any insights?
我还需要由数据库自动生成的 _id 对象，用于链接目的。这种方法没有给我_id，有什么见解吗？
回答by Ian Poston Framer
I'm sharing my answer for how I cleared data in the view after sign out from firebase using the firebase auth service. The data was still persisting after calling $scope.currentUser = null;on the signout method. Had to reload to see the data change. Not best UX.
我正在分享我在使用 firebase auth 服务从 firebase 注销后如何清除视图中数据的答案。调用$scope.currentUser = null;signout 方法后，数据仍然存在。必须重新加载才能看到数据更改。不是最好的用户体验。
$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);
});
}
so calling the getUserData method and making the currentUser = null there updated the view without a reload. this is an example using firebase but with a few adjustments it might apply to your needs for clearing data from view without a full page reload. Firebase does the heavy lifting here of clearing out the user object but my view doesn't care until I check again in my getCurrentUser method to see if there is still a user and if not then clear it from the $scope without reloading the view.
因此调用 getUserData 方法并使 currentUser = null 在那里更新视图而无需重新加载。这是一个使用 firebase 的示例，但经过一些调整，它可能适用于您在不重新加载整个页面的情况下从视图中清除数据的需求。Firebase 在这里完成了清除用户对象的繁重工作，但我的视图并不关心，直到我再次检查我的 getCurrentUser 方法以查看是否还有用户，如果没有，则从 $scope 中清除它而不重新加载视图。
