-1

У меня есть простое приложение, использующее настраиваемую директиву, но я полностью потерял попытку использовать выделенную область, пожалуйста, посмотрите и скажите мне, что писать, чтобы заполнить пробелы.Директивы AngularJs изолируют область

Что представляет собой приложение?

a) контроллер приложения генерирует элементы menu_list из службы, используя $ http, затем выполняет поиск и возвращает массив 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; 
});

Примечание: больной трески e удалить метод позже и обновить вопрос, но пока это не essentail. Спасибо заранее! Обновление: закодирован метод удаления на службе и контроллере.

источник

2016-10-17 shireef khatab

Есть несколько вещей, чтобы быть честным; службе необходимо вернуть массив элементов, этот массив необходимо передать в директиву через атрибут items, а затем шаблон директивы должен выполнить итерацию по массиву и принять меры на основе каждого элемента. Было бы проще продемонстрировать с помощью jsFiddle ... –

У вас есть область выделения, поэтому для функциональности, такой как события кликов, вам нужно либо привязать эти события, либо обработать их в контроллере в вашей настраиваемой директиве. – Zach

@Neil Hibbert Я верю, что я уже возвращаю массив из метода then –

Кажется, вы направлялись туда и обратно между директивой и компонентом. Компоненты имеют одностороннюю привязку, на которую вы ссылались <.Ваша директива должна выглядеть следующим образом:

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 должен показать, что есть, когда у вас есть 0 результатов.

<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-17 13:37:25 Zach

Какая легенда! Спасибо Вам большое. –

Почему здесь условие if? if (index> = 0) { $ scope.items.splice (индекс, 1); } –

Потому что, когда вы делаете 'indexOf', чтобы найти элемент в массиве, он вернет индекс 0 или больше, если он найдет его, иначе он вернет -1, поэтому он может быть записан' if (index! == -1) ' – Zach

-1

Посмотрите на документацию here. Вам нужно определить, какой тип привязки будет использоваться вашей директивой. Если вы передадите объекты в директиву, это будет =. Таким образом, директива определение сферы будет выглядеть следующим образом:

scope: { 
    items: '=' 
}

После этого ваша директивы сфера будет только у items определена в нем не всех других объектах родительской области. И вы можете использовать эту переменную, как всегда:

ng-repeat="item in items"

для вещей, как удалить можно реализовать функцию в директиве, но то, что он собирается сделать, это выходит за рамки текущего вопроса. Позвонить $ http может быть?

источник

2016-10-17 12:16:27

Пожалуйста, рассмотрите меня как новичок здесь, мне нужны эти недостающие части, чтобы закончить головоломку и попытаться понять живой пример не только документации –

Как новичок, вы должны прочитать всю документацию хотя бы один раз. И попытайтесь воспроизвести такие вещи, как они сделаны авторами рамок. Например, вы определяете директиву в переменной, которая будет возвращена только после одной строки. Пока документация всегда показывает 'return {}'. –

Директивы AngularJs изолируют область

Что представляет собой приложение?

Что я упускаю:

ответ

Смежные вопросы