ISSUE: can't access Json data inside the html template, AngularJS

Question

I am using combination of AngularJS 1.5.x and Angular Material. I have data stored in ../JSON/data.json, I am testing the whole thing in python3 localhost server.

The data is retrieved correctly and shows up in the Google Chrome Consoler

I have an HTML template

<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>

I have a js directive and controller attached to it

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

However when I try to access the json data {{vm.info[0].tab}} nothing is being displayed.

More importantly, when I try to attach ng-repeat to the md-tab the whole thing disappears. Here is how I reference the directive

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

So... question is... where did I done goofed?

PS I am still a newbie in Angular, so pardon any "bad code".

PPS the ng-repeat logic is not here yet, as I have trouble accessing JSON data :)

PPPS Can't access any variable. Even if I create a test vm.test = "test" I can't access it in any way.

Answer 1

Suggestion: please understand what is a $scope and how values are watched and rendered before messing with directives .

When creating a directive as you did, your directive is defined as follows:

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

When using this directive (as you correctly did), you will use the same scope from the parent (since you are not creating a new scope for the directive; that's why I encourage you to read carefully about scope, parenting, and isolation before messing more with this). Additionally, in the scope (it will work being the scope you are using, or using an isolated one), you created a new variable tabs as an alias of the current controller (that is not required but may be a good practice). So, in your rendered html (in the directive template) you will have access to:

{{ tabs.something }}

And will access something member if assigned to the controller.

In the controller code, vm is a reference to this , and this will be aliased as tabs , so by transitivity... vm in the code will be aliased as tabs in the template's html content. So what you're looking for is...

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