In Angular, wie JSON-Objekt / Array in Direktive übergeben?

Wenn Sie möchten, Folgen Sie den "best practices" es gibt ein paar Dinge, die ich empfehlen würde, von denen einige betroffen sind, die in anderen Antworten und Kommentare auf diese Frage.

Erste, während es nicht zu viel Einfluss auf die spezifische Frage, die Sie gefragt, Sie habe erwähnt, Effizienz, und der beste Weg, um Griff auf freigegebene Daten in Ihrem Antrag ist der Faktor, der es sich in einem Dienst.

Ich würde persönlich empfehlen umarmen AngularJS ist Versprechen systemdie Ihren asynchronen Dienste mehr composable im Vergleich zu raw-Rückrufe. Zum Glück, Eckig ist $http service Sie bereits verwendet unter der Haube. Hier ist ein service, der zurückkehren wird, ein Versprechen, löst die Daten aus der JSON-Datei; aufrufen der service mehr als einmal nicht zu einem zweiten HTTP-Anforderung.

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;
    }
  };
});

So weit wie immer Sie die Daten in Ihre Richtlinie, es ist wichtig, daran zu erinnern, dass Richtlinien sind entworfen, um die abstrakte generische DOM-manipulation; Sie sollten nicht injizieren Sie mit Applikations-spezifischen Dienstleistungen. In diesem Fall wäre es verlockend, einfach injizieren die locations service in der Richtlinie, aber diese Paare die Richtlinie zu, dass die service.

Eine kurze Anmerkung zu code Modularität: eine Richtlinie, die Funktionen sollte fast nie sein, dafür verantwortlich, oder die Formatierung Ihrer eigenen Daten. Es gibt nichts zu stoppen Sie mithilfe des $http-service aus einer Richtlinie, aber das ist fast immer der falsche Sache zu tun. Schreiben Sie einen controller verwenden, $http, ist der richtige Weg, es zu tun. Eine Richtlinie, die bereits berührt ein DOM-element, das ist ein sehr Komplexes Objekt, und es ist schwer zu stub für Testzwecke. Das hinzufügen von Netzwerk-I/O-der mix macht den code viel schwieriger zu verstehen und noch viel schwieriger zu testen. Darüber hinaus Netzwerk-I/O-sperren in der Weise, dass Ihre Richtlinie, wird, um seine Daten – vielleicht in einem anderen Ort, werden Sie wollen, um dieser Richtlinie empfangen von Daten von einem socket oder vorinstallierte Daten. Ihre Richtlinie sollte entweder Daten als Attribut durch scope.$eval und/oder einen controller zu handhaben, den Erwerb und die Speicherung der Daten.

- Die 80/20-Guide to Schreiben von AngularJS-Direktiven

In diesem speziellen Fall, sollten Sie die entsprechenden Daten auf dem controller - Rahmen und teilen Sie es mit der Richtlinie über ein Attribut.

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
        });
      });
    }
  };
});

In dieser Art und Weise, die map Richtlinie kann verwendet werden, mit alle Reihe von Standort-Daten--die Richtlinie ist nicht hart-codiert, um eine bestimmte Menge von Daten, und die Verknüpfung einfach die Richtlinie, indem Sie ihn in das DOM wird nicht Feuer aus zufälligen HTTP-Anfragen.

InformationsquelleAutor der Antwort Michelle Tilley

Was Sie brauchen, ist richtig-service:

.factory('DataLayer', ['$http',

    function($http) {

        var factory = {};
        var locations;

        factory.getLocations = function(success) {
            if(locations){
                success(locations);
                return;
            }
            $http.get('locations/locations.json').success(function(data) {
                locations = data;
                success(locations);
            });
        };

        return factory;
    }
]);

Den locations wäre-Cache auf dem Dienst, arbeitete als singleton-Modell. Dies ist der richtige Weg, um Daten abrufen.

Diesen service nutzen DataLayer im controller und der Richtlinie ist ok, wie folgt:

appControllers.controller('dummyCtrl', function ($scope, DataLayer) {
    DataLayer.getLocations(function(data){
        $scope.locations = data;
    });
});

.directive('map', function(DataLayer) {
    return {
        restrict: 'E',
        replace: true,
        template: '<div></div>',
        link: function(scope, element, attrs) {

            DataLayer.getLocations(function(data) {
                angular.forEach(data, function(location, key){
                    //do something
                });
            });
        }
    };
});

InformationsquelleAutor der Antwort Howard