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

How to access a controller from another controller in AngularJs

本文关键字：控制器 另一个 访问 访问控制 AngularJs      更新时间：2023-09-26

我想在Angularjs模块中使用另一个控制器中的另一个方法。我有两个控制器，一个名为：bookApplication模块中的Booklist控制器。另一个名为ShowEachBook。在BooklistController中，我创建了ViewItem（）方法，该方法可以从ShowEachBookController中的View _A_book（）方法访问。

这是我在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
    };
 })

这是ShowEachBook控制器

bookApp.controller('ShowEachBook', function ($scope, $http) {
  $scope.View_A_book = function($id){
       /// get book from server.
  }
})

创建一个工厂。您只需要定义一次，就可以从任何控制器注入和调用它。请参阅本文。

--

制作一个工厂ViewBook，并将您的函数添加到其中：您的工厂：

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

您的控制器：

var bookApp = angular.module('bookApp', []);
bookApp.controller('bookListCtr', function ($scope, $http, ViewBook) {
    $scope.ViewItems = function ($id) {
        ViewBook.view_a_book($id);
    };
 })

您使用$scope和$http添加对工厂的引用，并用它来调用它。这可以对您拥有的任何控制器重复。

您可以将项目中常见的所有方法或函数作为服务编写。在angular js中，我们可以创建2种类型的服务

  1. 工厂
  2. 服务

在您的问题中，您只需将函数"View_A_Book"编写为一个服务，然后将此服务注入到您想要使用该函数的控制器中。

请参阅以下链接以了解有关服务和工厂的信息

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

要在控制器之间共享信息，请使用服务。但对于您的用例，我建议使用具有两种状态的ui-router：list和list.detail，它们每个都有特定的控制器。在细节的url上映射单个项list/book/[id]的id，并从父状态通过API请求或列表数组进行解析。

相关文章：