AngularJS template component not rendering variables

Question

My goal is to render a bar graph angularJs chart, using an angularjs component. 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 :

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 :

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 . 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 a i dont use the 'binding process' and set the variables directly inside the component, then it works !

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 :

<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 :

  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 ) . So , as long as i don't use $scope, it is working inside the console, but the template doesnt render binded variables ...

EDIT 2 : This is how i call the template , very simple :

<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 :

The component call inside 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 .

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. Maybe it is because of the $scope syntax i'm using inside my main controller : it is maybe too old ..

RESOLVED Hey ! I was using angularjs 1.68 , so i should have looked at this before :

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):

<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 :

<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 !

Is the parent controller part a component, or is it just a controller? — Frank Modica
– Frank Modica, Commented Nov 6, 2018 at 10:47
It is just a classic controller, not a parent controller, thank you — jaja5000
– jaja5000, Commented Nov 6, 2018 at 10:52
In the child, this.labels will be available in the $onInithook. Don't reference it with console.log(labels) immediately, it won't be there and the variable doesn't exist. — Frank Modica
– Frank Modica, Commented Nov 6, 2018 at 10:55
But as you can see, the console is showing it when i'm not using $scope.labels, ok lets try ... — jaja5000
– jaja5000, Commented Nov 6, 2018 at 10:57
Consider making a simple fiddle, there are a lot of things that are missing (how do you call your component, the templates...). — Groben
– Groben, Commented Nov 6, 2018 at 11:10

Groben · Accepted Answer · 2018-11-06 11:21:15Z

1

If you are using $ctrl syntax:

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:

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>

edited Nov 6, 2018 at 11:21

answered Nov 6, 2018 at 11:17

Groben

1,3862 gold badges10 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

jaja5000 Over a year ago

Thank you ! Lets try this ! Do i have to keep the 'bindings' part of the component initialisation part ?

Groben Over a year ago

Updated for both syntaxes

jaja5000 Over a year ago

ReferenceError: "$ctrl is not defined" , please, then how do i show $ctrl.labels inside the template ?

Frank Modica Over a year ago

The OP is using a plain controller for the parent - not a component controller, so I’m not sure $ctrl is a thing (for the parent) unless you use controller as syntax

Frank Modica Over a year ago

At least I think that’s what OP meant by “classic controller”

|

Collectives™ on Stack Overflow

AngularJS template component not rendering variables

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related