这里我试图在从json获取的另一个列表中过滤它们之后添加一个项目列表。我必须使用promises（因为我已经使用过），我必须使用指令显示列表。
主要问题是我无法使用指令显示数据。我已经检查过，我的服装列表正在控制台中呈现，我可以使用我的主控制器打印它们，但不能使用指令控制器打印它们。
请帮助!!!
以下是干净代码的github链接。 [https://github.com/Msatabdee/coursera-test/tree/master/AngularJS_Module3][1]
<!doctype html>
<html lang="en">
<head>
<title>Narrow Down Your Menu Choice</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles/bootstrap.min.css">
<link rel="stylesheet" href="styles/styles.css">
<script src='angular.min.js'></script>
<script src='app.js'></script>
</head>
<body ng-app="NarrowItDownApp">
<div class="container" ng-controller='NarrowItDownController as list'>
<h1>Narrow Down Your Chinese Menu Choice</h1>
<div class="form-group">
<input type="text" ng-model="list.searchTerm" placeholder="search term" class="form-control">
</div>
<div class="form-group narrow-button">
<button class="btn btn-primary" ng-click="list.getMatchedMenuItems()">Narrow It Down For Me!</button>
</div>
<!-- <ul class="pull-left">
<li ng-repeat="item in list.foundItems">{{item.name}} = {{item.description}}</li>
</ul> -->
<!-- found-items should be implemented as a component -->
<found-items
items="list.items"
on-remove="list.removeItem(index)"></found-items>
</div>
</body>
</html>
<ol>
<li ng-repeat="item in list.items">
{{item.name}} = {{item.description}}
<button ng-click="list.onRemove({index: $index});">Don't want</button>
</li>
</ol>
<div class="error" ng-if="list.cookiesInList()">WARNING!!</div>
(function(){
'use strict';
angular.module('NarrowItDownApp',[])
.controller('NarrowItDownController',NarrowItDownController)
.service('MenuSearchService',MenuSearchService)
.directive('foundItems', foundItemsDirective);
function foundItemsDirective() {
var ddo = {
templateUrl: 'foundItems.html',
scope: {
items: '<',
onRemove: '&'
},
controller: foundItemsDirectiveController,
controllerAs: 'list',
bindToController: true
};console.log("in directive ctrl "+ ddo.items)
return ddo;
}
function foundItemsDirectiveController() {
var list = this;
list.items = [];
list.cookiesInList = function () {
for (var i = 0; i < list.items.length; i++) {
var name = list.items[i].name;
if (name.toLowerCase().indexOf("cookie") !== -1) {
return true;
}
}
return false;
};
}
NarrowItDownController.$inject = ['MenuSearchService'];
function NarrowItDownController(MenuSearchService){
var list = this;
list.getMatchedMenuItems = function(){
var promise = MenuSearchService.getMatchedMenuItems(list.searchTerm);
promise.then(function (response) {
console.log("in ctrl app "+response.data.menu_items[1].name)
list.items = [];
list.error="";
for (var i = 0; i < response.data.menu_items.length; i++) {
var name = response.data.menu_items[i].name;
if (name.toLowerCase().indexOf(list.searchTerm) !== -1) {
var item = {
name: response.data.menu_items[i].name,
description: response.data.menu_items[i].description
};
list.items.push(item);
}
}
console.log(list.items);
});
};
list.removeItem = function (itemIndex) {
MenuSearchService.removeItem(itemIndex);
};
}
MenuSearchService.$inject = ['$http'];
function MenuSearchService($http){
var service=this;
service.getMatchedMenuItems = function(searchTerm) {
var response = $http({
method: "GET",
url: ("http://davids-restaurant.herokuapp.com/menu_items.json")
});
return response;
};
service.removeItem = function (itemIndex) {
items.splice(itemIndex, 1);
};
}
})();