该应用的想法是什么！

Question

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

该应用的想法是什么！

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

我缺少什么：

我在我的directive.html中有三个地方我评论说＆lt; - ＆lt; ==这里说什么＆lt; ==＆lt; == - ＆gt;

也在我的index.html中我评论过＆lt; - 不确定 - ＆gt; 以及我的app.js评论＆lt; - 不确定 - ＆gt;

请看看这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;
});

注意：以后使用删除方法编码并更新问题，但现在它不是essentail。先感谢您！更新：在服务和控制器上编码remove方法。

Answer 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。您将它分配给变量并在元素内使用该变量。然后<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>是你的div应该显示的条件，当你得到0结果时。

Abs([Depth] - Sum([Depth]) OVER (Intersect(Next([RowID]),[PlaceName])))

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

Answer 2

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

scope: {
  items: '='
}

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

ng-repeat="item in items"

对于像删除这样的东西你可以在你的指令中实现函数，但是它要做的事情超出了你当前问题的范围。打电话给$ http？

AngularJs指令隔离范围

该应用的想法是什么！

我缺少什么：

2 个答案: