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

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 以添加具有双向输入的类“search-bar-input”的输入字段 数据绑定到 searchText 变量，并调用 update() 使用 ngChange 指令的函数。您还需要 ngRepeat 每个搜索结果都有一个带有“autocomplete-result”类的 div 元素。

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

有人可以帮忙吗？

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

其他信息：

如果你很好奇或者想做一件好事（我希望你这样做），这里有关于作业的更多信息，以及一个zip file ：

在本练习中，您将为 MEAN 零售实现主页视图 应用程序，用户访问时将看到的第一个视图 您的网站。该视图包含一个搜索栏，用于搜索 产品按文本，即使用 /api/v1/product/text/:query 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 of 4 成功（0.21 秒 / 0.126 秒）

Answer 1

虽然 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。

正如怀疑的那样，我很接近，但变量的名称让我失望。感谢您的帮助！

Answer 2

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

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

1. “以 HTML 格式显示自动完成结果”

{{product}} 应该是{{product.name}}