Is there a way to reload the angular controller programmatically

Question

In my HTML page, there are three tabs each having unique controller bonded to it as following:

MainHTML (app.pages.managing.html):

<div id="DetailsViewContainer">
    <div ng-if="selectedTab === 'tab1'">
        <div ng-include="getTabUrl('tab1')" ng-controller="DetailsController"></div>
    </div>
</div>
<div id="CoursesViewContainer">
    <div ng-if="selectedTab === 'tab2'">
        <div ng-include="getTabUrl('tab2')" ng-controller="CoursesController"></div>
    </div>
</div>
<div id="UsersViewContainer">
    <div ng-if="selectedTab === 'tab3'">
        <div ng-include="getTabUrl('tab3')" ng-controller="UsersController"></div>
    </div>
</div>

The main html is already bonded with parent controller as follows:

'use strict';
 angular.module('app.pages.manage').config([
    '$routeProvider',
     function($routeProvider, appSettingsProvider) {
         $routeProvider
         .when('/:lang?/group/landing/v2/manage/',
              {
                   templateUrl: '/js/app/pages/manage/views/app.pages.managing.html',
                   controller: 'mainController'
              });
         }
 ]);

My requirement is that on click event, I want to initialize the bonded controller corresponding to selected tab. For three bonded controller in HTML file I don't have separate url config so I can't use $location service. I explored $state in UI router as I don't want to initialize the parent controller which might be helpful (after defining three different routes for three controllers). But I am using ng-route module so it's not an option for me.

So is there any ways I can make my controller reload programmatically while switching tab (without url)? I am also thinking to bind this controller through routing rather than ng-controller, but then also I want to prevent reloading the state of parent controller (mainController) and then reload only selected controller which I can't find a solution with ng-route.

For above problem I also tried to use ui-router as my problem needs parent-child relation for views. But for some reason it's dependency collide with other modules in my project and it throws error. On prototype ui-router works great. I noticed there is a way for invoking controller function programmatically but there doesn't seem to be any way for invoking whole controller on click event. Any help would be appreciated. Thanks. — Nehal Soni
– Nehal Soni, Commented May 5, 2017 at 2:31

Hassan Imam · Accepted Answer · 2017-05-01 12:58:57Z

1

This might be helpful. This is a tutorial to dynamically load controller in the angularJS

https://weblogs.asp.net/dwahlin/dynamically-loading-controllers-and-views-with-angularjs-and-requirejs

answered May 1, 2017 at 12:58

Hassan Imam

22.6k6 gold badges45 silver badges53 bronze badges

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

Comments

Isaiah Lee · Accepted Answer · 2017-05-05 03:05:16Z

0

Nehal, you should really consider just investing some time to work with UI router. What you want can be handled elegantly using nested/child states in UI router, it was made for this kind of stuff.

answered May 5, 2017 at 3:05

Isaiah Lee

4482 silver badges11 bronze badges

Collectives™ on Stack Overflow

Is there a way to reload the angular controller programmatically

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related