-1

我有一个使用自定义指令的简单应用程序，但我在尝试使用隔离范围时完全迷失了方向，请看看并告诉我要写什么来填补空白。

该应用程序的想法是什么！

a) 应用程序控制器使用 $http 从服务生成 menu_list 项目，然后使用 found 函数搜索并返回 foundItems 数组（这一切都完成了！）。
b）该指令有一个有序列表循环抛出找到的项目并显示它们加上每个项目旁边的按钮以在需要时将其删除（这仍然需要）。

我错过了什么：

我的directive.html 中有三个地方我评论说<-- <== 在这里说什么<== <== -->

在我的 index.html 中我也评论了 <-- 不确定 --> 以及在我的 app.js 中评论了 <-- 不确定 -->

请看看这5个地方，告诉我该怎么做！

索引.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>

指令.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>

应用程序.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 方法进行错误编码并更新问题，但现在它不是必需的。先感谢您！更新：对服务和控制器上的删除方法进行编码。

4

2 回答 2

1

您似乎在指令和组件之间来回切换。组件具有您引用的单向绑定<。您的指令应如下所示：

app.directive('foundItems', function() {
    var ddo = {
      restrict: 'E', //Since this is a directive and not a component, you need to define which type (E = Element since you're using <found-items>)
      templateUrl: 'directive.html',
      scope: {
          items: '=' // This is two-way binding which you'll need for the array
      },
      controller: function ($scope) {
        $scope.remove = function (item) {
          // This can be where you make a call to your service to remove the item on the server
          var index = $scope.items.indexOf(item);
          if(index >= 0) {
            $scope.items.splice(index, 1);
          }
        }
      }
    }
    return ddo;
});

然后在您的控制器中，我建议您将搜索功能和结果分开：

app.controller('NarrowItDownController', ['$scope', 'MenuSearchService', function($scope, MenuSearchService) {
    $scope.searchTerm = 'soup';
    // It looks like you want to use found as both the results and the search function.  Separate them.
    $scope.search = function(searchTerm) {
      console.log('Searching for ' + searchTerm);
      MenuSearchService.getMatchedMenuItems(searchTerm).then(function(foundItems) {
        // The service executes asynchronously so use the then() to create a callback and store the results.
        $scope.results = foundItems;
      });
    };

    $scope.search($scope.searchTerm);
}]);

标记如下 - 注意ng-repeat. 您将其分配给一个变量并在元素内使用该变量。那么ng-if当你有 0 个结果时，div 应该显示什么时候是你的条件。

<div>
    <ol>
        <li ng-repeat="item in items">

            {{ item.name }}, {{ item.shortName }}, {{item.description}}
            <button ng-click="remove(item)">Remove item</button>

        </li>
    </ol>
    <div class="error" ng-if="items.length == 0">nothing found </div>

</div>

http://plnkr.co/edit/VqaYgNx56qbjAQT1Xd3m?p=preview

于 2016-10-17T13:37:25.683 回答
-1

在此处查看文档。您需要定义指令将使用的绑定类型。如果您将对象传递给指令，它将是=. 所以指令范围定义将是这样的：

scope: {
  items: '='
}

之后，您的指令范围将仅在items其中定义，而不是所有其他父范围对象。您可以像往常一样使用该变量：

ng-repeat="item in items"

对于诸如 remove 之类的事情，您可以在指令中实现功能，但它要做的事情超出了您当前问题的范围。打电话给 $http 可能吗？

于 2016-10-17T12:16:27.887 回答