Angularjs controllers: how to call a controller in another controller?

Question

I have this list controller,

define([
    'jquery',
    'app'
], function ($,app) {

    app.controller("ListContacts", function($scope,$route,$http){

        $http({
            method: 'GET', 
            url:'php/listContacts.php'
        }).then(function(response) {
            $scope.contacts = response.data;
         });
    });
});

And I have this search controller as well, and I want to call the list controller inside the search if query !== undefined

define([
    'jquery',
    'app'
], function ($,app) {

    app.controller("SearchContacts", function($scope,$route,$http){

        console.log($route.current.params.query);
        if($route.current.params.query !== undefined){
            // call the list controller
        }

        $scope.search = function() {
            console.log($('#frmSearchContacts').serialize());
            $scope.contacts = null;

        };

    });
});

is it possible?

EDIT

My router,

define([
    'app',
    'controller/AppCtrl',
    'controller/AppCtrl2',
    'controller/AppCtrl3',
    'controller/ListContacts',
    'controller/AddContact',
    'controller/UpdateContact',
    'controller/SearchContacts'
], function (app) {

    'use strict';
    //console.log(app);

    return app.config(['$routeProvider' , function ($routeProvider) {
        $routeProvider
        .when("/",
        {
            templateUrl: "js/template/app.html",
            controller: "AppCtrl"
        })
        .when("/listcontacts",
        {
            templateUrl: "js/template/list.html",
            controller: "ListContacts"
        })
        .when("/addcontact",
        {
            templateUrl: "js/template/add.html",
            controller: "AddContact"
        })
        .when("/updatecontact/:id",
        {
            templateUrl: "js/template/update.html",
            controller: "UpdateContact"
        })
        .when("/searchcontacts",
        {
            templateUrl: "js/template/search.html",
            controller: "SearchContacts"
        })
        .when("/searchcontacts/:query",
        {
            templateUrl: "js/template/search.html",
            controller: "SearchContacts"
        })
        .when("/:module/:method/",
        {
            templateUrl: "js/template/app.html",
            controller: "AppCtrl2"
        });
    }]);


});

Ihar Krasnik · Accepted Answer · 2013-12-29 14:50:15Z

2

Calling controller methods from another controller is actually not a good idea, following angular concepts.

In your case one solution is to use common service to get contacts

app.factory("contactsService",function(){
     return {
         getContacts: function(){
            return $http({
                method: 'GET', 
                url:'php/listContacts.php'
            });
         }
     }
})

And inject it into everything you want:

app.controller("SearchContacts", function($scope,$route,$http, contactsService){

    console.log($route.current.params.query);
    if($route.current.params.query !== undefined){
        contactsService.getContacts().then(function(response){
             $scope.contacts = response.data;            
        })
    }

    $scope.search = function() {
        console.log($('#frmSearchContacts').serialize());
        $scope.contacts = null;
    };

});

Also you can use events broadcasting, but in my opinion using service is the best solution in this case.

answered Dec 29, 2013 at 14:50

Ihar Krasnik

2,6392 gold badges15 silver badges17 bronze badges

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

2 Comments

Run Over a year ago

this is how i originally call the list controller on my router controller: "ListContacts"

Jim Schubert Over a year ago

+1 for suggesting a service. However, I'd avoid using angular.factory to define services (or angular.service to define factories)

Jim Schubert · Accepted Answer · 2013-12-29 19:39:46Z

The problem here is not with your controllers, but with the representation of data.

In both your controllers, you've already defined how to get contacts (in the list controller) and how to display 0..n contacts in js/template/list.html.

Depending on how that template is setup, you can use it for display and still define your SearchController to populate the contacts:

    .when("/searchcontacts",
    {
        templateUrl: "js/template/search.html",
        controller: "SearchContacts"
    })
    .when("/searchcontacts/:query",
    {
        templateUrl: "js/template/list.html", // notice here
        controller: "SearchContacts"
    })

This is very similar to how the angular.js tutorial displays a list or details of a phone.

If there is something else you need in your search template to be included in the listing, you could extract the contacts listing to another template and use ng-include to use that repeated template in both js/template/search.html and js/template/list.html.

edit: To better demonstrate what I mean, I've created an example on plunkr using the ng-include method as both an element and attribute.

Jim Cote · Accepted Answer · 2013-12-29 14:41:07Z

1

You can call

$broadcast('eventname', data)

in one controller, and receiving it using

$on('eventname', function (data) {});

in the other.

answered Dec 29, 2013 at 14:41

Jim Cote

1,7563 gold badges15 silver badges27 bronze badges

1 Comment

Run Over a year ago

Thanks Jim. Could you please show me an example how to use $broadcast?

Collectives™ on Stack Overflow

Angularjs controllers: how to call a controller in another controller?

3 Answers 3

2 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related