问题:can't访问html模板AngularJS中的Json数据

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

本文关键字：模板 html AngularJS 中的 数据 Json 访问 can 问题      更新时间：2023-09-28

我使用AngularJS 1.5.x和Angular Material的组合。我的数据存储在..中/JSON/data.JSON，我正在python3localhost服务器中测试整个过程。

数据被正确检索并显示在谷歌Chrome控制台中

我有一个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>

我有一个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'
    };
  };
})();

然而，当我尝试访问json数据｛｛vm.info[0].tab｝｝时，没有显示任何内容。

更重要的是，当我尝试将ng repeat附加到md选项卡时，整个东西就会消失。以下是我参考指令的方式

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

所以。。。问题是…我在哪里犯的错？

附言：我还是Angular的新手，所以请原谅任何"坏代码"。

附言：ng重复逻辑还没有出现，因为我在访问JSON数据时遇到了问题：）

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

建议：在干扰指令之前，请了解什么是$scope以及如何监视和呈现值。

当您创建指令时，您的指令定义如下：

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

当使用此指令时（正如您正确地做的那样），您将使用父级的相同作用域（因为您没有为该指令创建新作用域；这就是为什么我鼓励您在进一步处理此问题之前仔细阅读有关作用域、父级和隔离的内容）。此外，在作用域中（它将作为您正在使用的作用域或使用隔离的作用域工作），您创建了一个新变量tabs作为当前控制器的别名（这不是必需的，但可能是一个好的做法）。因此，在您呈现的html（在指令模板中）中，您将可以访问：

{{ tabs.something }}

如果分配给控制器，将访问something成员。

在控制器代码中，vm是对this的引用，而this将别名为tabs，因此通过传递性。。。代码中的vm将在模板的html内容中别名为tabs。所以你要找的是…

{{ tabs.info[0].tab }}
相关文章：