简体   繁体   English

如何从AngularJs中的另一个控制器访问控制器

[英]How to access a controller from another controller in AngularJs

I want to use another method from another Controller in an Angularjs Module. 我想从Angularjs模块中的另一个Controller使用另一个方法。 I have two Controller one named: Booklist Controller in bookApp Module. 我有两个名为Controller的控制器: bookApp模块中的Booklist控制器。 and another one named ShowEachBook . 另一个名为ShowEachBook In Booklist Controller I create ViewItem() method which can be accessible from View_A_book() method in ShowEachBook Controller. Booklist Controller中,我创建了ViewItem()方法,可以从ShowEachBook Controller中的View_A_book()方法访问该方法。

Here is my Controller in BookApp module 这是我在BookApp模块中的控制器

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 这是ShowEachBook控制器

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

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

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: 制作一个工厂ViewBook ,并添加功能:工厂:

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. 使用$scope$http添加对工厂的引用,并使用该引用进行调用。 This can be repeated for any controllers you have. 可以对您拥有的任何控制器重复此操作。

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 在angular js中,我们可以创建2种类型的服务

  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. 在您的问题中,您只需将函数“ View_A_Book”编写为服务,然后将该服务注入到要使用该函数的控制器即可。

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 http://blog.thoughtram.io/angular/2015/07/07/service-vs-factory-once-and-for-all.html

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. 但是对于您的用例,我建议使用具有两种状态的ui-routerlistlist.detail每个状态都具有特定的控制器。 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. 关于详细的URL映射的id的单个项目的list/book/[id]和解决ittrought从母体状态的API请求或列表阵列。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM