Angular js how to call two controllers in the same state?

Question

Angular js how to call two controllers in the same state?

Navigation

#1 by (1 votes)

2

Good morning.

I'm using angularJs. I have a state in which I need to call two different controllers, how is it done?

This is my code

.state('profile.Test', {
        url: '/test',
        views: {
            'test': {
                templateUrl: '/templates/Test.html',
                controller: 'DataTestController'

                // no se si en este mismo estado se pueda asociar otro template
                // con otro controlador

            }
        }

Thank you in advance.

angularjs

asked by devjav 01.09.2016 в 21:43

source

1 answer

I need to dynamically pass to the "query" object of SQLAlchemy the parameters of the class next to its attributes Error in sqlite

score 1 · Answer 1

Technically speaking you do not need to declare the controller in the same state to use it. This is possible since you can link a controller to the view using the directive ng-controller .

It is usually a good practice to declare it in the state, because that api is designed for that. What I explain next has a better way to do it (using multiple named views) but it shows my point

(Pattern not recommended)

app.js

$stateProvider
    .state('prueba', {
        url: '/prueba',
        templateUrl: 'vista.html'
    });

vista.html

<div ng-controller="Test1Controller">
<div ng-controller="Test2Controller">

This is a single state and has two controllers but it is a bad idea since it will be difficult to determine or change which ones are using your status information (you will have to go to the HTML code spaghetti to know).

The correct solution is to use multiple named views

(Recommended pattern)

vista.html

<div ui-view="principal"></div>
<div ui-view="secundario"></div>

app.js

$stateProvider
    .state('prueba', {
        url: '/prueba',
        views: {
            'principal': {
                templateUrl: 'principal.html',
                controller: 'PrincipalCtrl'
            },
            'secundario' {
                templateUrl: 'secundario.html',
                controller: 'SecundarioCtrl'
            }
        }        
    });

This will create you a single state and you will have two controllers with separate templates in it. All this information is available in the same statement from the state so it will be very easy to maintain in the future.

Additional note:

Usually your statement of statements is this

$stateProvider
    .state('prueba', {
        url: '/prueba',
        templateUrl: 'principal.html',
        controller: 'PrincipalCtrl'        
    });

Which is equivalent to this less

$stateProvider
    .state('prueba', {
        url: '/prueba',
        views: {
            // Sería una notación muy rara si hubiera que usarla todo el tiempo, no?
            '': {
                templateUrl: 'principal.html',
                controller: 'PrincipalCtrl'        
            }
        }            
    });

Which means that your directive ui-view written in this way

<div ui-view></div>

Equals the empty view (no name) or '' (you can also use '@' if you use absolute references). This is useful when you want to mix multiple named views with nested states which will create several controllers that inherit from a superior controller.