В Angular, как передать объект/массив JSON в директиву?

если вы хотите следовать всем "лучшим практикам", есть несколько вещей, которые я бы рекомендовал, некоторые из которых затронуты в других ответах и комментариях к этому вопросу.

---

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

Я бы лично рекомендовал обнять AngularJS обещать система, что сделает ваши асинхронные службы более составными по сравнению с необработанными обратными вызовами. К счастью, угловой $http сервис уже использует их под капотом. Вот служба, которая вернет обещание, которое разрешает данные из файла JSON; вызов службы более одного раза не вызовет второго HTTP-запроса.

app.factory('locations', function($http) {
  var promise = null;

  return function() {
    if (promise) {
      // If we've already asked for this data once,
      // return the promise that already exists.
      return promise;
    } else {
      promise = $http.get('locations/locations.json');
      return promise;
    }
  };
});

---

что касается получения данных в вашей директиве, важно помнить, что директивы предназначены для абстрактного обобщения DOM манипуляции; вы должны не вводишь их с применением конкретных услуг. В этом случае было бы заманчиво просто ввести locations сервис в директиву, но это связывает директиву с этой службой.

коротко о модульности кода: функции директивы почти никогда не должны отвечать за получение или форматирование своих собственных данных. Ничто не мешает вам использовать службу $http из директивы, но это почти всегда неправильно. Написание контроллера для использования $http-это правильный способ сделать это. Директива уже касается элемента DOM, который является очень сложным объектом и трудно заглушить для тестирования. Добавление сетевого ввода-вывода в микс делает ваш код гораздо более сложным для понимания и гораздо более сложным для тестирования. Кроме того, сетевой ввод-вывод блокируется таким образом, что ваша директива будет получать свои данные – возможно, в каком-то другом месте вы захотите, чтобы эта директива получала данные из сокета или принимать предварительно загруженные данные. Ваша директива должна либо принимать данные в качестве атрибута через область видимости.$eval и / или иметь контроллер для обработки получения и хранения данных.

-руководство 80/20 по написанию директив AngularJS

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

app.controller('SomeController', function($scope, locations) {
  locations().success(function(data) {
    $scope.locations = data;
  });
});

<ul class="list">
   <li ng-repeat="location in locations">
      <a href="#">{{location.id}}. {{location.name}}</a>
   </li>
</ul>
<map locations='locations'></map>

app.directive('map', function() {
  return {
    restrict: 'E',
    replace: true,
    template: '<div></div>',
    scope: {
      // creates a scope variable in your directive
      // called `locations` bound to whatever was passed
      // in via the `locations` attribute in the DOM
      locations: '=locations'
    },
    link: function(scope, element, attrs) {
      scope.$watch('locations', function(locations) {
        angular.forEach(locations, function(location, key) {
          // do something
        });
      });
    }
  };
});

в этом Кстати, о