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

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期望在成功时执行回调; 你的应用程序闪烁,因为你没有提供.换句话说,从您调用查询到完成时间提取时,您的列表为空.相反,我们希望它只在我们获得新数据时才会改变.我也改变了.

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