卡在驗證作業（nodejs，angularjs）

我有一個MEAN Stack作業，其中需要更改2個文件通過業力測試。這兩個文件是search_bar.html，功能controller.js。這個想法是使test.js文件通過。卡在驗證作業（nodejs，angularjs）

聽起來很簡單，但我不能爲我一生的愛做到這一點。我看了一遍又一遍的任務，這就是我到：

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（）函數，該函數將向服務器發出HTTP請求，並將服務器對HTML的響應公開。

您將不得不修改templates/search_bar.html中的HTML，以添加一個輸入字段，其中包含類search-bar-input，該字段有一個雙向數據綁定到searchText變量，並調用更新（）函數使用ngChange指令。您還需要爲每個搜索結果重新設置一個div元素，其中包含類「自動完成結果」。

我相信我當前的代碼就是這樣做的，但顯然這是錯誤的。我一直呆在這裏很長一段時間，我看不出什麼是錯的。

有人可以幫忙嗎？

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

附加信息：

如果你是好奇或感覺像做了一天的好事（我希望上帝你這樣做），這裏是關於家庭作業的其他信息，以及與它zip file：

在這個練習中，您將實現主視圖的平均零售應用，用戶在訪問您的網站時將看到的第一個視圖。該視圖包含一個搜索欄，通過文本搜索產品，即使用/ api/v1/product/text /：query REST API端點。

您將主要關注如何編寫通過test.js文件中指定的摩卡測試的代碼。你不會需要在瀏覽器中實際運行你的代碼，你會改用gulp和 karma來運行你的測試。測試意味着。js會爲您提供更快的反饋，並且還會爲您提供完成此練習所需的確切規格說明。

爲了運行測試，你應該：

運行NPM安裝在所提供的示例代碼

開始大口使用./node_modules/gulp/bin/gulp觀看使用

開始因緣。/node_modules/karma/bin/karma start ./karma.local.conf.js

你應該看看test.js中的測試，看看你的AngularJS代碼應該做什麼。

修改controllers.js和模板/ search_bar.html如下所述，直到通過測試和因果報應給你以下的輸出：

LOG：「實驗成功！複製/粘貼下面的代碼來完成這項任務：」 LOG： '' 鉻43.0.2357（Linux的）：執行的成功的4 4（0.21秒/ 0.126秒）

來源

2016-03-23 Flame_Phoenix

如果你想幫助修復失敗的測試，你還應該顯示測試:) –

測試文件有點大，我會找到一種方法來發布它！ –

添加了test.js文件的鏈接。如果有人有想法，我全是耳朵！ –

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

由於懷疑，我很接近，但變量的名字把我扔了。謝謝您的幫助！

來源

2016-03-29 14:52:03

「發出HTTP請求到/api/v1/product/text/test並暴露結果範圍」

$scope.productsList = data;應$scope.results = data;（一定要讀出的疑問句你的老師或者誰寫道TODO評論告訴你把它命名爲results而不是productsList），當然還有其他地方你提到的productsList也應該更改爲results。

「顯示在HTML自動填充結果」

{{product}}應{{product.name}}

來源

2016-03-28 18:39:28 HankScorpio

關閉，但沒有雪茄！儘管如此，你的努力引導着我。賞金是你的，當之無愧！ –

卡在驗證作業（nodejs，angularjs）

回答

相關問題