Question

我通过以下方式从视图调用函数approveArticle(art)：

<td>
  <a href="#" class="btn btn-success disabled" ng-show="art.approved">Approved</a>
  <a href="#" class="btn btn-info" ng-click="article.approveArticle(art)" ng-show="!art.approved">Approve</a>
</td>

（此处article是控制器，art来自以下ng-repeat：<tr ng-repeat="art in article.articles">

控制器中的功能如下所示：

vm.approveArticle = function (art) {
    art.approved = true;
};

视图按预期更改，单击后，“批准”按钮将被禁用的“已批准”按钮替换。但是，更改没有保存到数据库中（我一直在检查Robomongo - 同样，刷新后，批准也没有了。）

如何将这些更改保存到模型中？帮助赞赏。

ArticleSchema：

var ArticleSchema   = new Schema({
    title: { type: String },
    author: { type: String },
    body: { type: String },
    comments: [{
        body: { type: String },
        date: { type: Date }
    }],
    approved: { type: Boolean },
    created_at: { type: Date },
    updated_at: { type: Date }
});

文章的

GET和PUT路线：

articleRouter.route('/articles/:article_id')
    .get(function (req, res) {
        Article.findById(req.params.article_id, function (err, article) {
            if (err) {
                res.send(err);
            }
            res.json(article);
        });
    })
    .put(function (req, res) {
        Article.findById(req.params.article_id, function (err, article) {
            if (err) {
                res.send(err);
            }
            if (req.body.title) {
                article.title   = req.body.title;
            }
            if (req.body.author) {
                article.author  = req.body.author;
            }
            if (req.body.body) {
                article.body    = req.body.body;
            }
            if (req.body.date) {
                article.date    = req.body.date;
            }
            if (req.body.hidden) {
                article.hidden  = req.body.hidden;
            }
            article.save(function (err) {
                if (err) {
                    res.send(err);
                }
                res.json({ message: 'Article updated!' });
            });
        });
    });

articleController：

    .controller('articleController', function (Article) {
    'use strict';
    var vm = this;
    vm.processing = true;
    Article.all()
        .success(function (data) {
            vm.processing = false;
            vm.articles = data;
        });
    vm.deleteArticle = function (id) {
        if (confirm("You are about to delete an article!")) {
            vm.processing = true;
            Article['delete'](id)
                .success(function (data) {
                    Article.all()
                        .success(function (data) {
                            vm.processing = false;
                            vm.articles = data;
                        });
                });
        }
    };
    vm.approveArticle = function (art) {
        art.approved = true;
    };
});

articleEditController：（我有一种感觉，这可能是高度相关的）

.controller('articleEditController', function ($routeParams, Article) {
    'use strict';
    var vm = this;
    vm.type = 'edit';
    Article.get($routeParams.article_id)
        .success(function (data) {
            vm.articleData = data;
        });
    vm.saveArticle = function () {
        vm.processing = true;
        vm.message = '';
        Article.update($routeParams.article_id, vm.articleData)
            .success(function (data) {
                vm.processing = false;
                vm.articleData = {};
                vm.message = data.message;
            });
    };
});

articleService.js，包含相关工厂：

angular
    .module('articleService', [])
    .factory('Article', function ($http) {
        'use strict';

        var articleFactory = {};

        articleFactory.get = function (id) {
            return $http.get('/api/article/articles/' + id);
        };

        articleFactory.all = function () {
            return $http.get('/api/article/articles/');
        };

        articleFactory.create = function (articleData) {
            return $http.post('/api/article/articles/', articleData);
        };

        articleFactory.update = function (id, articleData) {
            return $http.put('/api/article/articles/' + id, articleData);
        };

        articleFactory['delete'] = function (id) {
            return $http['delete']('/api/article/articles/' + id);
        };

        return articleFactory;
    });

Answer 1

我意识到我只是在客户端更改属性，而不更改服务器上的任何内容。我想出的是以下内容。

我在approve模型中添加了Article方法，如下所示：

ArticleSchema.methods.approve = function (cb) {
    'use strict';
    this.approved = true;
    this.save(cb);
};

然后，我创建了一条用于批准文章的API路线：

articleRouter.route('/articles/:article_id/approve')
    .put(function (req, res) {
        Article.findById(req.params.article_id, function (err, article) {
            article.approve(function (err, article) {
                if (err) {
                    res.send(err);
                }
                res.json({ message: 'Article approved' });
            });
        });
    });

然后，我在工厂创建了一个基本调用，以便我可以重用代码：

articleFactory.approve = function (id) {
    return $http.put('/api/article/articles/' + id + '/approve');
};

最后，我重写了控制器中的函数，如下所示：

vm.approveArticle = function (art) {
    if (confirm("You are about to approve an article!")) {
        Article.approve(art._id)
            .success(function (data) {
                flash.success = 'Article approved!';
                art.approved = true;
            });
    }
};

在这里，我正在调用approve方法，以便向API发送PUT调用。一旦成功，我将发布一条flash消息（使用angular-flash）并更改当前对象的状态，以便视图立即反映更改。

我不确定最后一部分（可能有比art.approved = true;更好的方法），但这可以按照我的意图运作。

角度更改未保存到模型中

1 个答案: