在angularjs应用中如何在不刷新页面的情况下刷新视图

How to refresh view without refreshing page in an angularjs app

本文关键字：刷新 新视图 情况下 angularjs 应用      更新时间：2023-09-26

我有一个简单的应用程序，列出联系人报告，在其中，我做了一个列表视图，从Mongolab获取数据。

在此基础上，我还创建了一个输入表单，当提交时在列表中创建一个新的联系人报告

我在控制器中使用的函数是根据angular在他们网站上的例子建模的:

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();
    });

我也想在delete函数上实现这一点。谁能告诉我去哪儿学这个?

非常感谢您的帮助

好了，我更新了您的小提琴以从数据库中获取值: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)我将您的Mongo查询移动到一个函数中，以便在创建新记录时可以再次调用;

(2) $mongolabResource期望在成功时执行回调;你的应用闪烁是因为你没有提供。换句话说，从调用查询到获取完成，列表是空的。相反，我们希望它在获得新数据时只更改。我也改了

就手动添加条目或从数据库中获取而言，最佳实践是基于用例的，并且存在权衡。但是对于像这样的小数据，只需从DB中获取。

让这个工作，但仍然不确定推入数组在作用域，如果我们可以从数据库

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

我还需要由数据库自动生成的_id对象，用于链接目的。这个方法没有给我_id，有什么启示吗?

我正在分享我如何在使用firebase认证服务从firebase注销后清除视图中的数据的答案。在signout方法上调用$scope.currentUser = null;后，数据仍然存在。必须重新加载才能看到数据更改。不是最好的用户体验。

$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方法，看看是否还有一个用户，如果没有，然后从$范围中清除它，而不重新加载视图。

相关文章：