[英]ISSUE: can't access Json data inside the html template, AngularJS
I am using combination of AngularJS 1.5.x and Angular Material. 我正在使用AngularJS 1.5.x和Angular Material的组合。 I have data stored in ../JSON/data.json, I am testing the whole thing in python3 localhost server. 我将数据存储在../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. 更重要的是,当我尝试将ng-repeat附加到md-tab时 ,整个事情消失了。 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". PS我仍然是Angular的新手,所以请原谅任何“错误代码”。
PPS the ng-repeat logic is not here yet, as I have trouble accessing JSON data :) PPS的ng-repeat逻辑还没有出现,因为我无法访问JSON数据:)
PPPS Can't access any variable. PPPS无法访问任何变量。 Even if I create a test vm.test = "test"
I can't access it in any way. 即使创建测试vm.test = "test"
我也无法以任何方式访问它。
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). 此外,在合并范围中(它可以用作您正在使用的合并范围,也可以使用隔离的范围),您创建了一个新的变量tabs
作为当前控制器的别名(这不是必需的,但可能是一个好习惯)。 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. 如果分配给控制器,它将访问something
成员。
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. 在控制器代码, vm
是一个参考this
,而this
将别名为tabs
的传递......,所以vm
中的代码将被别名为tabs
模板的HTML内容。 So what you're looking for is... 所以您要找的是...
{{ tabs.info[0].tab }}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.