Question

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

数据已正确检索并显示在Google 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-tab 时，整个事情就会消失。以下是我如何引用指令

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

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

P.S。我仍然是Angular的新手，所以请原谅任何错误的代码＆＃34;。

P.P.S。 ng-repeat逻辑还没有到，因为我在访问JSON数据时遇到了麻烦:)

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

Answer 1

建议：请在弄乱指令之前了解什么是$ 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 }}

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

1 个答案: