javascript - 在不刷新页面的情况下无法更新 $scope 对象

Question

我使用 Angular 服务返回一个 Promise 对象，然后添加到数据中，但在没有页面刷新的情况下， View 不会使用新添加的元素进行更新。

如何在不刷新页面的情况下使 $scope.articles 在 View 中刷新？

查看:

<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>

Controller :

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中处理和响应请求的服务器 Controller 是:

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'

谢谢

Answer 1

将您的查找功能更改为此

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

数据在请求完成时设置，因此范围将更新