[英]AngularJS template component not rendering variables
My goal is to render a bar graph angularJs chart, using an angularjs component. 我的目标是使用angularjs组件绘制条形图angularJs图表。 So I need to use the binding, from the main controller in case of the data changes. 因此,如果数据发生更改,我需要使用主控制器的绑定。
I have an angularjs controller , with an array called 'labels' like that : 我有一个angularjs控制器,带有一个名为“ labels”的数组,如下所示:
var app = angular.module("app", ["ui.router", "ngCsv" ,'ngSanitize','ui.bootstrap' ])
app.controller('AnalyseController',AnalyseController)
AnalyseController.$inject = ['$scope'];
function AnalyseController($rootScope, $scope, $timeout, $http, $location, $window, $filter, $mdToast, $mdDialog, $sce, $state) {
labels = ['Toutes','Carrefour','Intermarché','Leclerc','Super U ','Carrefour','Lidl','Intersport','Decathlon','Dia','Renault','Osiatis'];
}
Then, i am trying to access ' labels' from an angularjs component like this : 然后,我试图从这样的angularjs组件访问“标签”:
app.component('graphique', {
templateUrl:'_commerciaux/views/include/graphique.html',
bindings:{labels:'='},
controller : [ '$http','$scope','$rootScope','toastr',function control($http,$scope,$rootScope,toastr){
console.log(labels);
this.labels = labels;
console.log(this.labels);
this.$onInit = function() {
this.labels = labels;
};
}]
})
Well, the console log shows nicely the labels, but there is no way to show this variable inside the template : it seems to be undefined . 嗯,控制台日志很好地显示了标签,但是没有办法在模板内显示此变量:它似乎是undefined。 whats weird is that i see it inside the console . 奇怪的是我在控制台内看到了它。
I'm trying to generate a graph, it doesnt work either , but as soon as ai dont use the 'binding process' and set the variables directly inside the component, then it works ! 我正在尝试生成一个图,它也不起作用,但是一旦AI不使用“绑定过程”并直接在组件内部设置变量,它就会起作用!
This is my html template, $ctrl.labels doesnt display, while it is set in the parent controller, and the component is supposed to bind it in a 2 way binding manner : 这是我的html模板,在父控制器中设置了$ ctrl.labels却没有显示,并且该组件应该以2种方式绑定它:
<div class="chart-wrapper analyse_graph" >
<canvas class="chart chart-line" chart-data="$ctrl.data" chart-labels="$ctrl.labels" chart-legend="true" chart-series="$ctrl.series" chart-options="$ctrl.options" chart-colors="$ctrl.colors" height="70"></canvas>
</div>
<div>
{{$ctrl.labels}} // NOT SHOWING !!
</div>
TEST 1 : I have changed my controller like this : 测试1:我已经这样更改了控制器:
function AnalyseController($rootScope, $scope, $timeout, $http, $location, $window, $filter, $mdToast, $mdDialog, $sce, $state) {
$scope.labels = ['Toutes','Carrefour','Intermarché','Leclerc','Super U ','Carrefour','Lidl','Intersport','Decathlon','Dia','Renault','Osiatis'];
}
but now, the console says : ReferenceError: "labels is not defined" , ( this message is coming from the component ) . 但是现在,控制台显示: ReferenceError:“未定义标签” ,(此消息来自组件)。 So , as long as i don't use $scope, it is working inside the console, but the template doesnt render binded variables ... 因此,只要我不使用$ scope,它就可以在控制台内运行,但是模板不会呈现绑定变量...
EDIT 2 : This is how i call the template , very simple : 编辑2:这就是我所说的模板,非常简单:
<graphique ></graphique>
EDIT 3 : Just to let you know how the graph works nicely, as long as i set the variable directly inside the component, and remove the binding part : 编辑3:只要让您知道图的工作原理,只要我直接在组件内部设置变量,然后删除绑定部分即可:
The component call inside HTML : HTML内的组件调用:
<graphique ></graphique>
The component itself : 组件本身:
app.component('graphique', {
templateUrl:'_commerciaux/views/include/graphique.html',
controller : [ '$http','$scope','$rootScope','toastr',function control($http,$scope,$rootScope,toastr){
this.labels = ['Toutes','Carrefour','Intermarché','Leclerc','Super U ','Carrefour','Lidl','Intersport','Decathlon','Dia','Renault','Osiatis'];
this.data = [[12,24,40,35,20,12,55,78,45,12,32,45],[10,15,30,35,12,15,70,24,25,10,47,25]];
}
The template : 模板:
<div class="chart-wrapper analyse_graph" >
<canvas class="chart chart-line" chart-data="$ctrl.data" chart-labels="$ctrl.labels" chart-legend="true" chart-series="$ctrl.series" chart-options="$ctrl.options" chart-colors="$ctrl.colors" height="70"></canvas>
</div>
<div>
{{$ctrl.labels}}
</div>
NOTE : And yes, {{$ctrl.labels}} displays well, but as long as I try to pass labels with the 'bindings' part from the component, it doesnt work any more, The template doesnt display . 注意:是的,{{$ ctrl.labels}}可以很好地显示,但是只要我尝试从组件传递带有“绑定”部分的标签,它就不再起作用,模板也不会显示。
Unfortunatly, , if i can't solve this problem, i've got to use the old faschionned '$emit' and duplicate tons of graphs and olds school controllers because the 'bindings' not working. 不幸的是,如果我不能解决这个问题,我必须使用老式的$ emit并复制大量图表和老式控制器,因为“绑定”无效。 Maybe it is because of the $scope syntax i'm using inside my main controller : it is maybe too old .. 也许是因为我在主控制器中使用的$ scope语法:可能太旧了..
RESOLVED Hey ! 解决的嘿! I was using angularjs 1.68 , so i should have looked at this before : 我使用的是angularjs 1.68,所以我应该在以前看过它:
https://code.angularjs.org/1.6.10/docs/guide/component https://code.angularjs.org/1.6.10/docs/guide/component
it is a few different than the lastest version ! 它与最新版本有所不同!
So this is now my main view (please notice the 'as ctrl' who was missing): 所以这现在是我的主要观点(请注意缺少的“ as ctrl”):
<div ng-controller="AnalyseController as ctrl" style="overflow:auto;max-height:1000px;">
next, in my main controller, i now set variables like this : 接下来,在我的主控制器中,我现在设置如下变量:
this.labels = ['Toutes','Carrefour','Intermarché','Leclerc','Super U ','Carrefour','Lidl','Intersport','Decathlon','Dia','Renault','Osiatis'];
this.data = [[12,24,40,35,20,12,55,78,45,12,32,45],[10,15,30,35,12,15,70,24,25,10,47,25]];
Then my component, is looking like that now : 然后我的组件现在看起来像这样:
app.component('graphique', {
templateUrl:'_commerciaux/views/include/graphique.html',
bindings:{labels:'=',data:'='},
controller : [ '$http','$scope','$rootScope','toastr',function control($http,$scope,$rootScope,toastr){
// No vars or init there
})
and, finally, this is the component call inside my view, pleae notice the variables calls : 最后,这是我视图内的组件调用,请注意变量调用:
<graphique labels="ctrl.labels" data="ctrl.data"></graphique>
Finally, my template still reference $ctrl vars : 最后,我的模板仍然引用$ ctrl vars:
<div class="chart-wrapper analyse_graph" >
<canvas class="chart chart-line" chart-data="$ctrl.data" chart-labels="$ctrl.labels" chart-legend="true" chart-series="$ctrl.series" chart-options="$ctrl.options" chart-colors="$ctrl.colors" height="70"></canvas>
</div>
<div>
{{$ctrl.labels}}
</div>
Thank a lot for you help ! 非常感谢您的帮助! Angularjs Is super TOP, my projet is version 1.6.8 , that is why it is different when talking about components ! Angularjs是超级TOP,我的projet版本是1.6.8,这就是为什么谈论组件时它有所不同的原因!
If you are using $ctrl syntax: 如果使用$ ctrl语法:
function AnalyseController($rootScope, $scope, $timeout, $http, $location, $window, $filter, $mdToast, $mdDialog, $sce, $state) {
var ctrl = this;
ctrl.labels = ['Toutes','Carrefour','Intermarché','Leclerc','Super U ','Carrefour','Lidl','Intersport','Decathlon','Dia','Renault','Osiatis'];
}
And for your template, you need to pass the parameter 对于模板,您需要传递参数
<graphique labels="$ctrl.labels"></graphique>
If you are using $scope syntax: 如果使用$ scope语法:
function AnalyseController($rootScope, $scope, $timeout, $http, $location, $window, $filter, $mdToast, $mdDialog, $sce, $state) {
$scope.labels = ['Toutes','Carrefour','Intermarché','Leclerc','Super U ','Carrefour','Lidl','Intersport','Decathlon','Dia','Renault','Osiatis'];
}
And in the template 并在模板中
<graphique labels="labels"></graphique>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.