Call function on html page from controller in AngularJS

Question

Long story short:

I have the following file structure:

class RandomCtrl {
    constructor(randomService) {
    this.randomService = randomService;
    ...
    }

    $onInit() {
        getData.call(null, this);
    }

    ...

    }

    updateLegendChart(){
         RandomCtrl.chartStuff.chart.unload("ID-1234");
    }

    function getData(RandomCtrl) {

        RandomCtrl.ChartDataService.getData(DemandCtrl.dataParams).then(result => {
        RandomCtrl.result = result.data;
        RandomCtrl.siteNames = result.data.map(element => element.SiteName);
        RandomCtrl.keys = Object.keys(result.data);
        RandomCtrl.chartStuff = getChart(result.data);  
        RandomCtrl.chartStuff.chart.unload("ID-1234");   ////<-HERE IT WORKS!!!

    }).catch((e) => {
        console.log(e);
    });
    }


    function getChart(data) {
        const chartOptions = getWeekHourlyOptions(data);

        const allCols = [].concat(chartOptions.dataColumns);

        ...
        return {allCols, chart};
    }

    ...

    RandomCtrl.$inject = ['randomService'];

    export const Random = {
        bindings: {
            data: '<',
            siteNames: '<'
        },
        templateUrl: randomPageHtml,
        controller: RandomCtrl
    };

I have a chart containing multiple lines each of them representing a site, I want to remove or add them when I click on their name in a legend section.

I do this by using load and unload methods of Billboard.js.

If a write it inside getData(), the line with HERE IT WORKS, it works but it does it every time I run the code, I want to do it only when I click a button.

The problem is that I cannot glue this functionality to an ng-click into an html page.

This is the html page:

<div class="demand page">
    <div  class="chart-legend-container">
        <div ng-repeat="site in $ctrl.keys">
            <chart-legend site="$ctrl.siteNames[site]" keys= "$ctrl.keys"></chart-legend>
            <button ng-click="$ctrl.updateLegendChart()">CLICK ME</button>
        </div>
    <div>
</div>

My approach was to use updateLegendChart() which is a method on the controller which should be called when ng-click is triggered.

The method is in the controller and looks like this:

updateLegendChart(){
    RandomCtrl.chartStuff.chart.unload("ID-1234");
}

The error says:

TypeError: Cannot read property 'chart' of undefined

Any idea how to call that function properly?

Karim · Accepted Answer · 2017-10-31 23:53:45Z

1

Inside $onInit hook 'this' keyword refers to the $onInit context , not to RandomCtrl

$onInit() {
    getData.call(null, this);
}

Probably something you don't want to do, because then you're appending all those properties (result, chartStuff, etc.) to the wrong object.

..
//here RandomCtrl is still $onInit context, and not the the class context
RandomCtrl.chartStuff = getChart(result.data);

As a consequence when you invoke updateLegendChart(), RandomCtrl doesn't have any chartStuff field, thus you get the exception "TypeError: Cannot read property 'chart' of undefined"

updateLegendChart(){
   RandomCtrl.chartStuff.chart.unload("ID-1234");
}

if you try passing RandomCtrl directly you should be fine.

$onInit() {
    getData.call(null, RandomCtrl);
}

edited Oct 31, 2017 at 23:53

answered Oct 31, 2017 at 17:09

Karim

8,6823 gold badges27 silver badges36 bronze badges

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

5 Comments

Samurai Jack Over a year ago

I don't think it has to do with that part. RandomCtrl.chartStuff.chart.unload("ID-1234"); works fine inside getData, I want to make it work inside the html page, something like this: $ctrl.updateLegendChart()

Karim Over a year ago

It works because inside getdata() you're referring to the same object (RandomCtrl) whether when you call the unload from within updateLegendChart() you refer to a different RandomCtrl.

Samurai Jack Over a year ago

Tried your approach, changed from this to RandomCtrl inside $onInit() but now it throws this error: Cannot read property 'getData' of undefined . Probably it doesn't like it like that

Samurai Jack Over a year ago

when I use this, it looks as this:

RandomService:RandomService {authService: {…}, $http: ƒ} data:undefined dataParams:{date: {…}, granularity: "FIFTEEN_MINUTES"} siteNames:undefined __proto__:Object

Samurai Jack Over a year ago

when I replace this with RandomCtrl: ƒ RandomCtrl(RandomService)

Samurai Jack · Accepted Answer · 2017-11-01 12:54:10Z

0

To make it work as expected it should be replaced RandomCtrl with this inside updateLegendChart() method like this:

updateLegendChart(siteNames){

    this.chartStuff.chart.unload(siteNames);
}

It doesn't need to modify $onInit() method, it should be let as it is

answered Nov 1, 2017 at 12:54

Samurai Jack

3,1559 gold badges37 silver badges59 bronze badges

Collectives™ on Stack Overflow

Call function on html page from controller in AngularJS

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related