Call a controller from another controller in AngularJS

Whenever you want to share some data between AngularJS controllers or whenever you want to pass some data from one controller to other controller, then you can communicate between controllers in multiple ways.

By Sharing a Service:

You can share a common service between two controllers.

consider you have the following service called 'myService' which returns an array like below.

var myApp = angular.module('myApp', []);
 
myApp.factory('myService', function () {
    return []; //return an array
});

Now you can use this service in your AngularJS controllers like below

function FirstController(myService) {
    //your code here
}
 
function SecondController(myService) {
    //your code here
}

you can also define methods in the service and you can call those methods from controllers.

By Emitting an Event ($emit):

You can dispatch an event using $emit from one controller and you can listen to that event using $on from other controller.

Example:

function FirstController($scope) {
    $scope.$on('someEvent', function (event, args) {
    });
    // this is another controller or even directive
}
 
function SecondController($scope) {
    $scope.$emit('someEvent', args);
}

here orgs means Optional set of arguments which will be passed onto the event listeners.

In this way you can communicate between the controllers in AngularJS.

For more posts on angularJS visit: AngularJS

Read more...

Uncaught ReferenceError:Controller is not defined in AngularJS

If you have some AngularJS code like this,

var mailApp = angular.module('myMail', []);

function emailRouteConfig($routeProvider) {
    $routeProvider.when('/', { controller: listController, templateUrl: 'list.html' }).
                   when('/view/:id', { controller: DetailController, templateUrl: 'detail.html' }).
                   otherwise({ redirectTo: '/'});
}

and controller like this,

mailApp.controller('listController',function ($scope) {
    $scope.messages = messages;
})

mailApp.controller('DetailController',function ($scope, $routeParams) {
    $scope.message = messages[$routeParams.id];
})

then this will generate a error in console saying Uncaught ReferenceError: controller is not defined in module.

To overcome this issue there are two solutions.

Solution 1:

The issues is because of this

    $routeProvider.when('/', { controller: listController, templateUrl: 'list.html' }).
                   when('/view/:id', { controller: DetailController, templateUrl: 'detail.html' })

This is telling Angular to point at the listController object, which is undefined and causes an error.

Now, enclose the controller name in quotes like this,

    $routeProvider.when('/', { controller: 'listController', templateUrl: 'list.html' }).
                   when('/view/:id', { controller: 'DetailController', templateUrl: 'detail.html' })

Solution 2:

Define your controllers like this

function listController($scope) {
    $scope.messages = messages;
}

function DetailController($scope,$routeParams) {
    $scope.message=messages[$routeParams.id];
}

Read more...