0

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.
  }
})
DMS-KH
  • 2,669
  • 8
  • 43
  • 73
  • 1
    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 [mcve]. Could you check that link and try to both cut some (superfluous) and add some (needed) code? – Jeroen May 11 '16 at 05:17
  • 1
    View_A_Book method should be created in a service (instead of another controller) and use that service in your controller. – Shailendra Singh Deol May 11 '16 at 05:40
  • can you show me some – DMS-KH May 11 '16 at 05:42
  • Use events to communicate between each other, or in this case maybe use services! – Bettimms May 11 '16 at 05:49
  • You must be looking for "broadcast" – Somnath Kharat May 11 '16 at 06:07
  • http://stackoverflow.com/questions/27866620/use-case-for-controller-service-in-angularjs you can refer this.. you can use $controller. – SVK May 11 '16 at 06:32

3 Answers3

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.

cst1992
  • 3,823
  • 1
  • 29
  • 40
Pravesh Khatri
  • 2,124
  • 16
  • 22
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

  1. Factory
  2. 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

Libin C Jacob
  • 1,108
  • 12
  • 34
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.

pdorgambide
  • 1,787
  • 19
  • 33