2013-08-07 37 views
8

Poszukuję sposobu na pobranie początkowych danych z DOM po załadowaniu aplikacji. Dane zostały wstawione do widoku przez serwer. Czy metoda Module jest dobrym pomysłem?AngularJS - Pobieranie danych w domenie

Poza tym chcę wiedzieć, jak uzyskać dane z widoków, gdy pracuję z routes, czy mogę używać znaczników script do wstrzykiwania danych w określonych zakresach?

Widziałem pytania: this i this, ale to nie pomogło.

+1

możliwy duplikat [wstępne ładowanie danych w angularjs] (http://stackoverflow.com/questions/18086823/initial-data-loading-in-angularjs) –

Odpowiedz

16

1) Pierwsze rozwiązanie inspirowane this question i jest Module's value method:

<script> 
    var users_json = '[{"name":"Piotr"},{"name":"Natasha"}]'; // created by xsl 
    myApp.value("PrimaryData" , users_json); 
</script> 
<ul> 
    <li ng-repeat="user in users">{{user.name}}</li> 
</ul> 

Wtedy możemy użyć tego PrimaryData kiedy i gdzie chcemy, tak:

myApp.controller('MainCtrl', function($scope, PrimaryData) { 
    $scope.data = angular.copy(PrimaryData); 
    console.log($scope.data[0].name === "John"); 
}); 

Ale w ten sposób jakoś nie pracował dla mnie, gdy zacząłem używać routes, może być, ponieważ value działa tylko podczas inicjowania aplikacji.

2) Oto drugie rozwiązanie: dyrektywy. Teraz, gdy serwer wysyła szablon trasy za, stawia wewnątrz jakiegoś script tagu z "text/template" rodzaju i szczególnej właściwości name dyrektywą oraz danych JSON w tym tagu, tak:

<script type = "text/template" rawdata >  <!-- "rawdata" is our directive 
    '[{"name":"Nelson"},{"name":"Luis"}]'  // created by xsl 
</script> 
<ul> 
    <li ng-repeat="user in users">{{user.name}}</li> // view is beside 
</ul> 

a niniejszą dyrektywą łapie go i przekazuje dane do bieżącej trasy "zakres:

studio.directive('rawdata', function() { 
    return { 
    link: function(scope, element, attr, ctrl) { 
     if(scope.passRawData){ 
      var data = (element[0].innerHTML); 
      scope.passRawData(data); // Or simply scope.users = JSON.parse(data) 
     } else { 
      console.log("Scope has no passRawData method"); 
     } 
    } 
    } 
}); 

Awesome! :)

+6

dzięki za podejście dyrektywne, to sprytne. –

+0

Właśnie użyłem rozwiązania dyrektywy i to wielkie dzięki. Ale musiałem usunąć pojedyncze cudzysłowy wokół JSON w tagu skryptu. Co sprawiło, że je tam umieściłeś? – Gaz