Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/406.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 问题:can';t访问html模板AngularJS中的Json数据_Javascript_Angularjs_Json - Fatal编程技术网

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

Javascript 问题:can';t访问html模板AngularJS中的Json数据,javascript,angularjs,json,Javascript,Angularjs,Json,我使用的是AngularJS 1.5.x和Angular材质的组合。我将数据存储在../JSON/data.JSON中,我正在python3 localhost服务器中测试整个过程 数据被正确检索并显示在Google Chrome控制台中 我有一个HTML模板 <md-tab label="one" class="material-tab"> <md-content class="md-padding" layout="column" layout-align="cente

我使用的是AngularJS 1.5.x和Angular材质的组合。我将数据存储在../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>
但是,当我尝试访问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还是个新手,所以请原谅任何“错误代码”

p.p.S.由于我在访问JSON数据时遇到问题,ng repeat逻辑还没有出现:)

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 }}
如果分配给控制器,则将访问
某个
成员

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

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

使用“then”而不是“success”,并放置、和日志响应对象属性以进行调试。我知道,由于调用console.log(vm.info[0].tab)输出值“bones”,因此正确接收JSON数据。然而,在HTML模板中调用相同的东西,不会显示任何内容。忘了提及,调用的结果相同。然后,
vm.info[0]。tab
未绑定到任何作用域,vm也不是对别名控制器的引用。由于您不使用隔离作用域,因此您使用的是继承的作用域,
controllerAs
设置为tabs。所以请尝试:
tabs.info[0]。tab
{{ tabs.info[0].tab }}