TAGS :Viewed: 7 - Published at: a few seconds ago

[ Angularjs: When page loads, (for the first tab) trigger the method that is normally triggered by ngClick on a button ]

This is related to a tabbed interface for displaying timelines/posts from different social networks.

Everything is fine, I have a sidebar with vertically tiled tabs. Click on a tab will make a call to the resource and load that tab (social network)'s posts.

ng-click="loadTabContent('network')"

The issue is that on page load no tab has content displayed, whereas I'd like the first one to be already loaded (obviously). I assume I need to somehow trigger that very same method when page loads and have it aimed towards the first li element (the top tab).

NOTES:

  1. Since AngularJS does loading the data, the tab content wrapper is already in place - it even contains li elements in itself - but they are empty since the method which retrieves the actual content of LI elements hasn't been called. LI elements are there because they are custom directives (restricted to "A"), and are precoded in HTML.

Answer 1


Keeping in mind a piece of advice from a SO user from my other question, and stumbling upon some crucial info on another website, I used the ngInit directive for the first time and it turned out to be exactly what I needed.

My HTML:

ng-controller="MyCtrl" ng-init="init('socialnetwork')"

My controller:

$scope.methodToFireOnLoad = function(someVariableArgHere){ // code here }
$scope.init = function(argumentFromInit){
    // fire the desired method - fixed value - in my case value related to the first tab
    $scope.methodToFireOnLoad(argumentFromInit);
}