【问题标题】:How to access a controller from another controller in AngularJs如何从AngularJs中的另一个控制器访问控制器
【发布时间】:2016-05-11 05:14:59
【问题描述】:

我想在 Angularjs 模块中使用另一个控制器的另一个方法。 我有两个控制器,一个名为:bookApp 模块中的 Booklist 控制器。 另一个名为 ShowEachBook。 在 Booklist 控制器中,我创建了 ViewItem() 方法,可以从 ShowEachBook 控制器中的 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.
  }
})

【问题讨论】:

  • 您的问题有点难以理解。部分原因是我认为的语言(如果可能,请尝试查看您的第一段),部分原因是因为我看不到您的代码如何用于创建minimal reproducible example。您能否检查该链接并尝试删除一些(多余的)并添加一些(需要的)代码?
  • View_A_Book 方法应该在服务中创建(而不是另一个控制器)并在您的控制器中使用该服务。
  • 你能给我看一些吗
  • 使用事件在彼此之间进行通信,或者在这种情况下可能使用服务!
  • 您一定在寻找“广播”

标签: javascript angularjs twitter-bootstrap


【解决方案1】:

创建工厂。 您只需定义一次,就可以从任何控制器注入和调用它。 See this article.

--

创建一个工厂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 添加对工厂的引用,并使用它来调用它。可以对您拥有的任何控制器重复此操作。

【讨论】:

    【解决方案2】:

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

    1. 工厂
    2. 服务

    在您的问题中,您只需将函数“View_A_Book”编写为服务,然后将该服务注入您要使用该函数的控制器。

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

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

    【讨论】:

      【解决方案3】:

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

      【讨论】:

        猜你喜欢
        • 2018-06-15
        • 2016-05-30
        • 2015-10-31
        • 1970-01-01
        • 2017-03-23
        • 1970-01-01
        • 1970-01-01
        • 2015-09-08
        • 2014-12-11
        相关资源
        最近更新 更多