[英]Cannot update a $scope object without a page refresh
我正在使用Angular Service返回Promise对象,然后将其添加到数据中,但是在没有页面刷新的情况下,视图不会使用新添加的元素进行更新。
如何在不刷新页面的情况下刷新$ scope.articles在视图中?
视图:
<table class="table table-border">
<tr>
<th>Title</td>
<th>Author</th>
<th>Date</th>
<th>Delete</th>
<th>View</th>
</tr>
<tr data-ng-repeat="article in articles">
<td data-ng-bind="article.title"><a data-ng-href="/articles/{{article._id}}">{{article.title}}</td>
<td data-ng-bind="article.user.displayName">{{article.user.displayName}}</td>
<td>{{article.created | date:'mediumDate'}}</td>
<td><button class="btn btn-warning" ng-click="remove(article)">Delete</td>
<td><button class="btn btn-danger" ui-sref="listArticles.viewArticle({articleId: article._id})">View</td>
</tr>
</table>
控制器:
angular.module('articles').controller('ArticlesController', ['$scope', '$stateParams', '$location', 'Authentication', 'Articles', 'myAppointment',
function($scope, $stateParams, $location, Authentication, Articles, myAppointment) {
$scope.authentication = Authentication;
$scope.articles = {};
$scope.myAppointment = myAppointment;
$scope.find = function() {
$scope.articles = Articles.query();
};
//initially runs to fill the data on the page.
$scope.find();
$scope.create = function() {
var article = new Articles({
title: this.title,
content: this.content
});
article.$save(function(response) {
//I'm trying to run $scope.find() again to refresh the data in $scope.articles - it shows up in the console but not in the view?
$scope.find();
console.log($scope.articles);
$location.path('articles');
$scope.title = '';
$scope.content = '';
}, function(errorResponse) {
$scope.error = errorResponse.data.message;
});
};
编辑
添加了文章资源:
'use strict';
//Articles service used for communicating with the articles REST endpoints
angular.module('articles').factory('Articles', ['$resource',
function($resource) {
return $resource('articles/:articleId', {
articleId: '@_id'
}, {
update: {
method: 'PUT'
}
});
}
]);
服务器控制器在Node中处理和响应请求的原因是:
exports.list = function(req, res) {
Article.find().sort('-created').populate('user', 'displayName').exec(function(err, articles) {
if (err) {
return res.status(400).send({
message: errorHandler.getErrorMessage(err)
});
} else {
console.log(articles);
res.json(articles);
}
});
};
这需要解决吗? 如果有人可以提供帮助,我将不胜感激,因为我不知道如何使用它。
编辑:
我现在想知道这是否是路由问题,因为我的创建状态为列表状态的子状态-也许?
function($stateProvider) {
// Articles state routing
$stateProvider.
state('listArticles', {
url: '/articles',
templateUrl: 'modules/articles/views/list-articles.client.view.html'
}).
state('listArticles.createArticle', {
url: '/create',
templateUrl: 'modules/articles/views/create-article.client.view.html'
谢谢
将您的查找功能更改为此
$scope.find = function() {
Articles.query({}, function (response) {
// Will update scope, function will be called if http status === 200
$scope.articles = response;
}, function () {
// This is a error function will called if http status != 200
});
};
查询函数将不会返回任何内容,您需要在回调中设置数据,因此您可以将两个函数分别作为成功和错误来传递,或者将promise与两个函数一起使用:
$scope.find = function() {
Articles.query().$then(function (response) {
// Will update scope, function will be called if http status === 200
$scope.articles = response;
}, function () {
// This is a error function will called if http status != 200
});
};
请求完成时设置数据,因此将更新范围
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.