Question

我有一个列出联系报告的简单应用，在其中我创建了一个列表视图，从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();
    });

我想在删除功能上实现这一点。有人能指出我可以在哪里学到这个吗？

非常感谢任何帮助

Answer 1

好的，我更新了你的小提琴来从数据库中获取值：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期望在成功时执行回调;你的应用程序闪烁，因为你没有提供。换句话说，从您调用查询到完成时间提取时，您的列表为空。相反，我们希望它在获取新数据时仅更改。我也改变了。

在手动添加项目或从数据库中提取方面，最佳做法是基于用例并进行权衡。但是对于像这样的小数据，只需从数据库中获取。

Answer 2

让这个工作，但仍然不确定在范围内推入数组，如果我们可以从数据库中获取会更好

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

我还需要db自动生成的_id对象，以便进行链接。这种方法不能给我_id，任何见解吗？

Answer 3

我正在分享我在使用firebase auth服务从firebase注销后如何清除视图中的数据的答案。在注销方法上调用$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中清除它。

如何在angularjs应用程序中刷新视图而不刷新页面

3 个答案: