Question

首先，让我告诉你，我是javascript和node.js的新手。我一直在寻找帮助，试图做我想要的但尚未找到。

我正在使用MEAN堆栈（http://mean.io/），我正在尝试在包含的文章模型中实现搜索功能。搜索将查找具有特定标记的文章，并将在索引页面中实现。跟我来，看看你能不能找到我所缺少的东西。

在后端：

应用程序/模型/

/**
 * Article Schema
 */
var ArticleSchema = new Schema({
    created: {
        type: Date,
        default: Date.now
    },
    title: {
        type: String,
        default: '',
        trim: true
    },
    content: {
        type: String,
        default: '',
        trim: true
    },
    tag: {
        type: String,
        default: '',
        trim: true
    },
    user: {
        type: Schema.ObjectId,
        ref: 'User'
    }
});

应用程序/控制器/

exports.searcharticle = function(req, res) {
    Article.find({'tag': req.params.tag}).sort('-created').populate('user', 'name username').exec(function(err, articles) {
        if (err) {
            res.render('error', {
                status: 500
            });
        } else {
            res.jsonp(articles);
        }
    });
};

在app / routes / articles.js

中添加了搜索路线

app.get('/articles/search/:tag', articles.searcharticle);

在前端：

创建搜索视图，将显示搜索结果 - public / views / articles / search.html

<section data-ng-controller="ArticlesController" data-ng-init="searchart()">
<ul class="articles unstyled">
<li data-ng-repeat="article in articles">
<span>{{article.created | date:'medium'}}</span> /
<span>{{article.user.name}}</span>
<h2><a data-ng-href="#!/articles/{{article._id}}">{{article.name}}</a></h2>
<div>{{article.tag}}</div>
</li>
</ul>
<h1 data-ng-hide="!articles || articles.length">Your search hasn't returned any results. <br> Why don't you <a href="/#!/articles/create">Create One</a>?</h1>
</section>

index.html的视图，其中将实现搜索框

<section data-ng-controller="ArticlesController">
      <form role="form" data-ng-submit="searchart()">
        <div>
          <div>
            <input type="text" id="tag" ng-model="selected" class="form-control" placeholder="Tag">
          </div>
          <div>
            <button type="submit" class="btn btn-default">Submit</button>
          </div>
        </div> 
      </form>

添加了到config.js的路由

when('/articles/search/:tag', {
            templateUrl: 'views/articles/search.html'
        }).

并将搜索功能添加到文章控制器

$scope.searchart = function() {
    Articles.query(function(articles) {
        $scope.articles = articles;
    });
};

现在，通过实现此代码，当我单击索引页面中的提交按钮时，没有任何反应。

你能找到我错过的东西吗？

提前致谢！

Answer 1

为了在客户端文章服务中使用URL，您应该在文章服务中定义URL参数：packages / articles / public / services / article.js，就像在那里已经定义的articleId参数一样：

angular.module('mean.articles').factory('Articles', ['$resource',
  function($resource) {
    return $resource('articles/:articleId', {
      articleId: '@_id'
    }, {
      update: {
        method: 'PUT'
      }
    });
  }
]);

然后你需要在你的角度控制器搜索方法中传递它，比如通过id获取一个的函数，如下所示：

$scope.findOne = function() {
      Articles.get({
        articleId: $stateParams.articleId
      }, function(article) {
        $scope.article = article;
      });
    };

就个人而言，除了现有的参数之外，我不知道如何向$ resource对象添加另一个参数（articleId），您可能必须使用新参数（：tag）创建另一个$ resource服务并使用它在角度控制器的搜索方法中。

对我来说听起来更简单灵活的另一种方式就是在查询方法中传递搜索参数，如下所示：

 $scope.searchart = function() {
    Articles.query({tag:$scope.selectedTag}, function(articles) {
        $scope.articles = articles;
    });
};

然后在服务器端控制器上，读取您的查询参数：

exports.searcharticle = function(req, res) {
    Article.find(req.query).sort('-created').populate('user', 'name username').exec(function(err, articles) {
        if (err) {
            res.render('error', {
                status: 500
            });
        } else {
            res.jsonp(articles);
        }
    });
};

在MEAN堆栈中创建搜索文章功能

1 个答案: