PROBLEM: Zugriff auf Json-Daten innerhalb der HTML-Vorlage, AngularJS

Question

Ich verwende eine Kombination aus AngularJS 1.5.x und Angular Material. Ich habe Daten in ../JSON/data.json gespeichert, ich teste die ganze Sache in Python3 Localhost Server.

Die Daten werden korrekt abgerufen und zeigt sich in der Google Chrome-Consoler

ich eine HTML-Vorlage haben

<md-tab label="one" class="material-tab"> 
    <md-content class="md-padding" layout="column" layout-align="center center"> 
    <md-card class="card-tab card-bg"> 
     <md-card-title> 
     <md-card-title-text> 
      <span class="md-headline"> {{vm.info[0].tab}} Bone Bone</span> 
      <span class="md-subhead">Text</span> 
     </md-card-title-text> 
     <md-card-title-media> 
      <img class="md-media-lg" src="../IMG/favicon.png" /> 
     </md-card-title-media> 
     </md-card-title> 
     <md-card-actions> 
     <md-button class="md-raised md-primary">See More</md-button> 
     <md-button class="md-raised md-warn">Full List</md-button> 
     <md-button class="md-raised md-primary button-right">Email</md-button> 
     </md-card-actions> 
    </md-card> 
    </md-content> 
</md-tab> 

Ich habe eine js Richtlinie und Controller daran befestigten

(function() { 
    angular 
    .module('webApp') 
    .controller('showcaseController', showcaseController) 
    .directive('boneShowcaseTab', boneShowcaseTab); 

    showcaseController.$inject = ['$http']; 

    function showcaseController($http) { 
    var vm = this; 

    vm.info = []; 

    $http.get('../JSON/data.json').success(function(response) { 
     console.log("Loaded data.json"); 
     console.log(JSON.stringify(response));  // TODO remove 

     vm.info = response.data.information; 
    }); 
    }; 

    function boneShowcaseTab($http) { 
    return { 
     restrict: 'E', 
     templateUrl: '../TEMPLATES/tabs.html', 
     controller: 'showcaseController', 
     controllerAs: 'tabs' 
    }; 
    }; 
})(); 

Wenn ich jedoch versuche, auf die JSON-Daten {{vm.info [0] .tab} zuzugreifen, wird nichts angezeigt.

Noch wichtiger ist, wenn ich versuche, ng-repeat zum md-Tab das Ganze verschwindet zu befestigen. Hier ist, wie ich die Richtlinie referenzieren

<md-tabs flex md-dynamic-height md-border-bottom md-stretch-tabs="always"> <bone-showcase-tab></bone-showcase-tab>         <!-- CUSTOM TABS --> 
    </md-tabs> 

Also ... Frage ist ... wo habe ich getan getan?

P.S. Ich bin immer noch ein Neuling in Angular, also entschuldige irgendeinen "schlechten Code".

P.P.S. Die ng-repeat-Logik ist noch nicht da, da ich Probleme beim Zugriff auf JSON-Daten habe :)

P.P.S. Kann auf keine Variablen zugreifen. Selbst wenn ich einen Test vm.test = "test" erstelle, kann ich in keiner Weise darauf zugreifen.

Answer 1

Vorschlag: Bitte verstehen Sie, was ein $ Scope ist und wie Werte beobachtet und gerendert werden, bevor Sie mit Direktiven.

Wenn eine Richtlinie erstellen, wie Sie getan haben, ist Ihre Richtlinie wie folgt definiert:

function boneShowcaseTab($http) { 
    return { 
     restrict: 'E', 
     templateUrl: '../TEMPLATES/tabs.html', 
     controller: 'showcaseController', 
     controllerAs: 'tabs' 
    }; 
}; 

Wenn diese Direktive (wie Sie richtig gemacht), werden Sie den gleichen Umfang von der Mutter verwenden (da Sie erstellen keinen neuen Bereich für die Richtlinie, deshalb ermutige ich Sie, sorgfältig über Umfang, Elternschaft und Isolation zu lesen, bevor Sie sich damit beschäftigen. Darüber hinaus haben Sie im Bereich (der Bereich, den Sie verwenden oder einen isolierten Bereich verwenden) eine neue Variable tabs als Alias ​​des aktuellen Controllers erstellt (dies ist nicht erforderlich, kann jedoch eine gute Vorgehensweise sein). Also, in gerenderte HTML (in der Richtlinie Vorlage) Sie haben Zugriff auf:

{{ tabs.something }} 

Und something Mitglied zugreifen, wenn auf dem Controller zugeordnet.

Im Controller-Code, vm ist ein Verweis auf this und this als tabs, so von transitivity ... vm im Code als tabs HTML-Inhalt in der Vorlage aliased werden wird aliased. Also, was Sie suchen, ist ...

{{ tabs.info[0].tab }}