Question

我有MEAN Stack的作业，需要更改2个文件以通过业力考试。这两个文件是search_bar.html，并在controller.js中运行。我们的想法是让test.js文件通过。

听起来很简单，但我不能为了生命的爱而去做。我一遍又一遍地阅读作业，这就是我所要做的：

search_bar.html：

<div class="search-bar-wrapper">
    <input class="search-bar-input" ng-model="searchText" ng-change="update()"/>
</div>

<div ng-repeat="product in productsList" class="autocomplete-result">
    {{product}}
</div>

Controller.js：

exports.SearchBarController = function($scope, $http) {
    // TODO: this function should make an HTTP request to
    // `/api/v1/product/text/:searchText` and expose the response's
    // `products` property as `results` to the scope.
    $scope.update = function() {
        $http.
            get('/api/v1/product/text/' + $scope.searchText).
                success(function(data) {
                    $scope.productsList = data;
                }
            );
    };

作业的目标如下：

您必须修改controllers.js中的SearchBarController以填写update（）函数，该函数将向   服务器并公开服务器对HTML的响应。



您必须修改templates / search_bar.html中的HTML，以添加具有双向“class-bar-input”类的输入字段   数据绑定到searchText变量，并调用update（）   使用ngChange指令的函数。您还需要ngRepeat   每个搜索结果都带有“autocomplete-result”类的div元素。

我相信我当前的代码就是这样，但显然这是错误的。我已经被困在这里很长一段时间了，我看不出有什么问题。

有人可以帮忙吗？

=============================================== ================

其他信息：

如果你感到好奇或者想要做一天的好事（我希望你能做到上帝），这里有关于家庭作业的更多信息，以及zip file与它一起：

在本练习中，您将实现MEAN零售的主视图   应用程序，用户访问时将看到的第一个视图   你的网站。该视图包含一个搜索的搜索栏   产品按文字，即使用/ api / v1 / product / text /：查询REST   API端点。

您将主要关注编写通过的代码   test.js文件中指定的mocha测试。你不需要   实际上在浏览器中运行您的代码，您将改为使用gulp和   业力来运行你的测试。测试intest.js将为您提供更快的速度   反馈，也将为您提供准确的规范   你需要做的就是完成这个练习。

为了运行测试，你应该：


在提供的示例代码中运行npm install

使用./node_modules/gulp/bin/gulp watch
开始gulp
使用./node_modules/karma/bin/karma start ./karma.local.conf.js
开始业力
您应该查看test.js中的测试，以确切了解您的AngularJS代码应该做什么。


如下所述修改controllers.js和templates / search_bar.html，直到测试通过并且karma为您提供以下输出：

日志：'测试成功！复制/粘贴以下代码以完成此任务：'   日志：''   Chrome 43.0.2357（Linux）：执行4个成功中的4个（0.21秒/ 0.126秒）

Answer 1

“向/api/v1/product/text/test发出HTTP请求，并将结果公开到范围”

$scope.productsList = data;应为$scope.results = data;（请务必阅读问题，您的导师或撰写TODO评论的人告诉您将其命名为results，而不是productsList），当然，您引用productsList的任何其他地方也应更改为results。

“以HTML格式显示自动填充结果”

{{product}}应为{{product.name}}

Answer 2

虽然HankScorpio提供的答案引导我走向正确的方向，但它并没有完整，留下了一些解释的东西。

真正帮助我的一件事（因为我是新来的）是用业力仔细检查测试本身，特别是这个：

it('makes an HTTP request to `/api/v1/product/text/test` and exposes results to scope', function(done) {
    httpBackend.expectGET('/api/v1/product/text/test').respond({
      products: [{ name: 'test1' }, { name: 'test2' }]
    });

    scope.$on('SearchBarController', function() {
      element.find('input').val('test');
      element.find('input').trigger('input');
      assert.equal(scope.searchText, 'test');

      httpBackend.flush();
      assert.equal(scope.results.length, 2);
      assert.equal(scope.results[0].name, 'test1');
      assert.equal(scope.results[1].name, 'test2');

      ++succeeded;
      done();
    });
  });

在这里，我可以看到，我需要一个scope.results和product.name变量以及控制器中我应该data.products的变量。

怀疑，我很接近，但变量的名字让我失望。谢谢你的帮助！

陷入karma验证作业（nodejs，angularjs）

2 个答案: