данных и директивы (структура)

Question

После вашего о большой Angularjs структуре приложения Я использую этот стилистический справочник:

https://github.com/johnpapa/angular-styleguide

Я разработал itemManager (контроллер элемент-менеджер), который имеет две вложенные директивы (варианты поиска и результаты поиска).

• Item Менеджер

  • Параметры поиска (не важно сейчас)

  • Результат поиска

Шаблон менеджер пункт будет показывать параметры поиска и результат поиска s (с использованием итератора).

Контроллер указателя результата поиска содержит всю информацию, необходимую для отображения элемента.

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

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

Я думаю, что разметка на менеджере элемента должно быть что-то вроде:

<search-result ng-repeat="//iterator"><search-result> 

но в Item Manager, не имеют доступа к поисково-результирующих переменных (они находятся в пределах поиска результата).

Тогда, если я храню переменную внутри директивы результата поиска, я должен перебирать внутри шаблона директивы, который, я думаю, не прав. Кто-нибудь может дать мне совет о том, как это должно быть структурировано?

Answer 1

Одно изящным решением было бы хранить результаты поиска в сервисе и не полагаются на прототипическое наследование между областями. Посмотрите на это:

HTML:

<div ng-app="app"> 

    <div ng-controller="itemController"> 
     <search-options></search-options> 
     <search-result ng-repeat="item in items" item="item"></search-result> 
    </div> 

</div> 

JavaScript:

var app = angular.module('app', []); 

app.service('searchResultsService', function() { 
    var myData = ['a', 'b', 'c']; 
    return { 
     get: function() { 
      return myData; 
     }, 
     set: function(data) {myData = data;} 
    }; 
}).controller('itemController', function($scope, searchResultsService) { 
    $scope.searchResultsService = searchResultsService; 
    $scope.items = []; 
    $scope.$watch('searchResultsService.get()', function(newVal) { 
     $scope.items = newVal; 
    }); 
}).directive('searchResult', function() { 
    return { 
     scope: { 
      item: '=' 
     }, 
     restrict: 'E', 
     template: '<p>{{item}}</p>' 
    }; 
}).directive('searchOptions', function(searchResultsService) { 
    return { 
     scope: {}, 
     restrict: 'E', 
     template: '<button ng-click="search()">Search</button>', 
     link: function link(scope, element, attrs) { 
      scope.search = function() { 
       searchResultsService.set(['d', 'e', 'f']); 
      }; 
     } 
    }; 
}); 

Работа скрипку здесь: https://jsfiddle.net/ben1729/x551pmz8/3/

Answer 2

Вы можете безопасно хранить данные в itemManager контроллера и директивы внутри в нем по-прежнему будет иметь доступ к нему в качестве директивы области расширена с родительским контроллером