How to access a controller from another controller in AngularJs

Question

I want to use another method from another Controller in an Angularjs Module. I have two Controller one named: Booklist Controller in bookApp Module. and another one named ShowEachBook. In Booklist Controller I create ViewItem() method which can be accessible from View_A_book() method in ShowEachBook Controller.

Here is my Controller in BookApp module

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

bookApp.controller('bookListCtr', function ($scope, $http) {

    $scope.ViewItems = function ($id) {
        $this->View_A_book($id);// This is example because I want to used View_A_book() method here
    };
 })

And here is the ShowEachBook Controller

bookApp.controller('ShowEachBook', function ($scope, $http) {

  $scope.View_A_book = function($id){
       /// get book from server.
  }
})

Your question is a bit hard to grasp. Part of it is due to language I think (if possible, try to review your first paragraph), and part of it is because I don't see how your code can be used to create an minimal reproducible example. Could you check that link and try to both cut some (superfluous) and add some (needed) code? — Jeroen
– Jeroen, Commented May 11, 2016 at 5:17
View_A_Book method should be created in a service (instead of another controller) and use that service in your controller. — Shailendra Singh Deol
– Shailendra Singh Deol, Commented May 11, 2016 at 5:40
Use events to communicate between each other, or in this case maybe use services! — Bettimms
– Bettimms, Commented May 11, 2016 at 5:49

cst1992 · Accepted Answer · 2016-05-11 06:59:00Z

4

Create a factory. You only have to define it once, and it can be injected and called from any controller. See this article.

--

Make a factory ViewBook, and add your function to it: Your factory:

angular.module('bookApp')
    .factory('ViewBook', function () {
        return {
            view_a_book: function(id) {
                //do whatever you want to.
                return something 
            },
        };
    });

Your controller:

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

bookApp.controller('bookListCtr', function ($scope, $http, ViewBook) {

    $scope.ViewItems = function ($id) {
        ViewBook.view_a_book($id);
    };
 })

You add a reference to the factory with $scope and $http, and use that to call it. This can be repeated for any controllers you have.

edited May 11, 2016 at 6:59

cst1992

3,9481 gold badge32 silver badges42 bronze badges

answered May 11, 2016 at 5:55

Pravesh Khatri

2,28418 silver badges22 bronze badges

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

Comments

Libin C Jacob · Accepted Answer · 2016-05-11 06:30:58Z

1

You can write all the methods or functions which is common to your project as a Service. In angular js we can create 2 types of Services

Factory
Service

In your problem you just write the function 'View_A_Book' as a service and just inject this service to the controller which you want to use the function.

Please refer the below link to get the idea about Service and Factory

http://blog.thoughtram.io/angular/2015/07/07/service-vs-factory-once-and-for-all.html

answered May 11, 2016 at 6:30

Libin C Jacob

1,1381 gold badge13 silver badges38 bronze badges

Comments

pdorgambide · Accepted Answer · 2016-05-11 06:08:24Z

0

To share info betwen controllers use a Service. But for your use case I sugess use ui-router with two states: list and list.detail each of them with specific controller. On url of detail map the id of the single item list/book/[id] and resolve ittrought a API request or list array from parent state.

answered May 11, 2016 at 6:08

pdorgambide

1,86722 silver badges35 bronze badges

Collectives™ on Stack Overflow

How to access a controller from another controller in AngularJs

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related