4

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

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

非常感谢您的帮助

4

3 回答 3

9

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

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

于 2013-01-05T21:15:22.663 回答
0

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

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

我还需要由 db 自动生成的 _id 对象，用于链接目的。这种方法没有给我_id，有什么见解吗？

于 2013-01-05T21:01:36.947 回答
0

我正在分享我在使用 firebase auth 服务从 firebase 注销后如何清除视图中的数据的答案。$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 方法以查看是否仍有用户，如果没有，则从 $scope 中清除它而不重新加载视图。

于 2017-02-02T19:05:19.923 回答