ISSUE：无法访问html模板AngularJS中的Json数据

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.

我正在使用AngularJS 1.5.x和Angular Material的组合。我有数据存储在../JSON/data.json中,我在python3 localhost服务器上测试整个事情。

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

数据已正确检索并显示在Google Chrome控制台中

I have an HTML template

我有一个HTML模板

<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

我有一个js指令和控制器连接到它

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

但是,当我尝试访问json数据时{{vm.info [0] .tab}}没有显示任何内容。

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

更重要的是,当我尝试将ng-repeat附加到md-tab时,整个事情就消失了。这是我如何引用该指令

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

所以...问题是......我在哪里搞砸了?

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

附:我仍然是Angular的新手,所以原谅任何“坏代码”。

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

P.P.S. ng-repeat逻辑还没有到,因为我无法访问JSON数据:)

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

P.P.P.S无法访问任何变量。即使我创建了一个测试vm.test =“test”,我也无法以任何方式访问它。

1 个解决方案

#1

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

建议:请理解什么是$ scope以及在弄乱指令之前如何监视和呈现值。

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:

当使用这个指令时(正如你所做的那样),你将使用父对象的相同作用域(因为你没有为指令创建一个新的作用域;这就是为什么我鼓励你在弄乱之前仔细阅读范围,为人父母和隔离更多与此)。此外,在范围内(它将作为您正在使用的范围,或使用隔离的范围),您创建了一个新的变量选项卡作为当前控制器的别名(这不是必需的,但可能是一个好习惯)。因此,在您呈现的html(在指令模板中),您将有权访问:

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

在控制器代码中,vm是对此的引用,这将作为选项卡别名,因此通过传递性...代码中的vm将作为模板的html内容中的选项卡别名。所以你要找的是......

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

#1