Angular: How can I call a controller function from an HTML view using ng-if or another Angular directive

Question

My question is; how can I call a controller function from my view when a condition is met/equates to true, using ng-if or perhaps some other Angular directive?

Something like this:

<div ng-if="dataHasBeenLoaded == 'true'" ng-init="configureWordCloudGraph()"></div>

This is what I would like to achieve:

When my data has loaded and was retrieved via my API call, I would like to set a $scope variable ($scope.dataHasBeenLoaded = true;) to true. And when this $scope variable === true, it is evaluated in my DOM, and then calls a function configureWordCloudGraph() in my controller:

$scope.configureWordCloudGraph = function () {

    if ($scope.dataHasBeenLoaded) {
        var data = $scope.wordCloudData;
        $scope.twitterProfileWords = WordCloud.setUpTags(data.words);
    }

}

This is my view:

<div ng-controller="TwitterWordCloudController">
    <div id="word">
        <og-data-box heading="Most used words on Twitter" link="" uid="socialMentionsMeta" description="">
            <div class="dataStatus" ng-show="!dataContent">{{dataStatus}}<og-loading-indicator></og-loading-indicator></div>
            <div class="dataContent" ng-show="dataContent" ng-mouseover="showGraphTrainingInfo()">
                <og-word-cloud words="twitterProfileWords"></og-word-cloud>
                <div ng-if="dataHasBeenLoaded == 'true'" ng-init="configureWordCloudGraph()"></div>
            </div>
        </og-data-box>
    </div>
</div>

Why won't you invoke the configureWordCloudGraph function directly in the controller after you load the data? — Paweł Kozikowski
– Paweł Kozikowski, Commented Dec 13, 2016 at 12:54
The way you calling controller is correct. Whats the error are you getting ? — selvakumar
– selvakumar, Commented Dec 13, 2016 at 12:56
Good and obvious question! i actually do. HOWEVER, for some reason, the SVG WordCloud does not display all the time. It seems it DOES actually generate the WordCloud, but it is like it is hidden. I have to resize the page before it refreshes and displays. I am testing to see if I can re-call the function, and what effect it will have. — onmyway
– onmyway, Commented Dec 13, 2016 at 12:59
Please check how it is actually hidden: if it's done by angular or something else. Also check the value of 'dataContent' - that's the variable responsible for showing the cloud. Maybe you should also invoke the showGraphTrainingInfo after you load the data? — Paweł Kozikowski
– Paweł Kozikowski, Commented Dec 13, 2016 at 13:05

Silvinus · Accepted Answer · 2016-12-13 14:36:10Z

1

Simple way can be to watch dataHasBeenLoaded and launch configureWordCloudGraph when true :

var deregister = $scope.$watch('dataHasBeenLoaded', function() {
    if($scope.dataHasBeenLoaded) {
         configureWordCloudGraph();
         deregister();
    }
})

answered Dec 13, 2016 at 14:36

Silvinus

1,4459 silver badges16 bronze badges

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

1 Comment

Silvinus Over a year ago

Don't agree, watcher is launch when dataHasBeenLoaded is true, and the method deregister supress angular handle so watcher become 'inactive' and doesn't impact performance

onmyway · Accepted Answer · 2016-12-14 08:51:12Z

As per the comment from selvassn, the way to call an Angular controller from an HTML view is as follows:

NOTE: I'll break it down in 3 parts of code; Just the HTML method call, the controller method, the complete HTML code including the controller method call.

Just the HTML Controller Method call code:

<div ng-if="dataHasBeenLoaded == 'true'" ng-init="configureWordCloudGraph()"></div>

Controller Method:

$scope.configureWordCloudGraph = function () {

    if ($scope.dataHasBeenLoaded) {
        var data = $scope.wordCloudData;
        $scope.twitterProfileWords = WordCloud.setUpTags(data.words);
    }

}

HTML view Controller Method call:

<div ng-controller="TwitterWordCloudController">
    <div id="word">
        <og-data-box heading="Most used words on Twitter" link="" uid="socialMentionsMeta" description="">
            <div class="dataStatus" ng-show="!dataContent">{{dataStatus}}<og-loading-indicator></og-loading-indicator></div>
            <div class="dataContent" ng-show="dataContent" ng-mouseover="showGraphTrainingInfo()">
                <og-word-cloud words="twitterProfileWords"></og-word-cloud>
                <div ng-if="dataHasBeenLoaded == 'true'" ng-init="configureWordCloudGraph()"></div>
            </div>
        </og-data-box>
    </div>
</div>

Collectives™ on Stack Overflow

Angular: How can I call a controller function from an HTML view using ng-if or another Angular directive

2 Answers 2

1 Comment

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Related