【发布时间】：2016-10-17 11:58:58
【问题描述】：
我有一个使用自定义指令的简单应用程序，但我在尝试使用隔离范围时完全迷失了方向，请看看并告诉我要写什么来填补空白。
这个应用的想法是什么！
a) 应用程序控制器使用 $http 从服务生成 menu_list 项目，然后使用 found 函数搜索并返回 foundItems 数组（这一切都完成了！）。
b) 该指令有一个有序列表循环抛出找到的项目并显示它们，并在每个项目旁边加上一个按钮，以便在需要时将其删除（这仍然需要）。
我错过了什么：
我在directive.html 中有三个地方我评论说
在我的 index.html 中我也评论过 以及在我的 app.js 中评论
请看看这 5 个地方，告诉我该怎么做！
index.html：
<!doctype html>
<html lang="en" ng-app="NarrowItDownApp">
<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">
</head>
<body>
<div class="container" ng-controller="NarrowItDownController">
<h1>Narrow Down Your Chinese Menu Choice</h1>
<div class="form-group">
<input type="text" placeholder="search term" class="form-control" ng-model="searchTerm">
</div>
<div class="form-group narrow-button">
<button class="btn btn-primary" ng-click="found(searchTerm)">Narrow It Down For Me!</button>
</div>
<found-items items="found(searchTerm)"></found-items>
<!-- Not sure -->
</div>
<script src="scripts/angular.min.js"></script>
<script src="scripts/app.js"></script>
</body>
</html>
directive.html：
<div>
<ol>
<li ng-repeat="item in items"><!-- <== What to say here <== <== -->
{{ item.name }}, {{ item.shortName }}, {{item.description}}
<button ng-click="remove">Remove item</button> <!-- <== What to say here <== <== -->
</li>
</ol>
<div class="error" ng-if="foundItem.length">nothing found
</div> <!-- <== What to say here <== <== -->
</div>
app.js：
var app = angular.module('NarrowItDownApp', []);
app.controller('NarrowItDownController', ['$scope', 'MenuSearchService', function($scope, MenuSearchService) {
var $scope = $scope;
$scope.searchTerm = 'soup';
$scope.found = function() {
return MenuSearchService.getMatchedMenuItems($scope.searchTerm);
}
console.log(MenuSearchService.getMatchedMenuItems($scope.searchTerm));
$scope.remove = function(index){
service.removeItem(index);
}
}]);
app.service('MenuSearchService', ['$http', function($http) {
var service = this;
service.getMatchedMenuItems = function(searchTerm) {
searchTerm = searchTerm.toLowerCase();
return $http({
method: 'GET',
url: 'https://davids-restaurant.herokuapp.com/menu_items.json'
})
.then(function(response) {
var result = response.data.menu_items;
console.log('Result: ' + result.length);
var foundItems = [];
result.forEach(function(obj) {
if (searchTerm != '') {
if ((obj.name.indexOf(searchTerm) != -1) || (obj.description.indexOf(searchTerm) != -1)) {
foundItems.push(obj);
}
}
})
console.log('Found Items: ' + foundItems.length)
return foundItems;
}, function(error) {
console.log('Error from $http' + error);
});
}
service.removeItem = function(index){
service.getMatchedMenuItems(index).splice(index, 1);
}
}]);
app.directive('foundItems', function() {
var ddo = {
templateUrl: 'directive.html',
scope: {
items: '<found' // Not sure
}
}
return ddo;
});
注意：稍后对 remove 方法进行编码并更新问题，但现在它不是必需的。 先感谢您！ 更新：在服务和控制器上编写了 remove 方法。
【问题讨论】：
-
说实话有几点；服务需要返回一个项目数组，该数组需要通过 items 属性传递给指令，然后指令模板需要遍历数组并根据每个项目采取行动。用 jsFiddle 演示会更容易......
-
您有一个隔离范围，因此要拥有点击事件等功能，您需要为这些事件绑定或在自定义指令的控制器中处理它们。
-
@Neil Hibbert 我相信我已经从 then 方法返回了一个数组
标签： angularjs angularjs-directive isolate-scope