Question

我有列表控制器，

define([
    'jquery',
    'app'
], function ($,app) {

    app.controller("ListContacts", function($scope,$route,$http){

        $http({
            method: 'GET', 
            url:'php/listContacts.php'
        }).then(function(response) {
            $scope.contacts = response.data;
         });
    });
});

我也有搜索控制器，如果query !== undefined我想在搜索中调用列表控制器

define([
    'jquery',
    'app'
], function ($,app) {

    app.controller("SearchContacts", function($scope,$route,$http){

        console.log($route.current.params.query);
        if($route.current.params.query !== undefined){
            // call the list controller
        }

        $scope.search = function() {
            console.log($('#frmSearchContacts').serialize());
            $scope.contacts = null;

        };

    });
});

有可能吗？

修改

我的路由器，

define([
    'app',
    'controller/AppCtrl',
    'controller/AppCtrl2',
    'controller/AppCtrl3',
    'controller/ListContacts',
    'controller/AddContact',
    'controller/UpdateContact',
    'controller/SearchContacts'
], function (app) {

    'use strict';
    //console.log(app);

    return app.config(['$routeProvider' , function ($routeProvider) {
        $routeProvider
        .when("/",
        {
            templateUrl: "js/template/app.html",
            controller: "AppCtrl"
        })
        .when("/listcontacts",
        {
            templateUrl: "js/template/list.html",
            controller: "ListContacts"
        })
        .when("/addcontact",
        {
            templateUrl: "js/template/add.html",
            controller: "AddContact"
        })
        .when("/updatecontact/:id",
        {
            templateUrl: "js/template/update.html",
            controller: "UpdateContact"
        })
        .when("/searchcontacts",
        {
            templateUrl: "js/template/search.html",
            controller: "SearchContacts"
        })
        .when("/searchcontacts/:query",
        {
            templateUrl: "js/template/search.html",
            controller: "SearchContacts"
        })
        .when("/:module/:method/",
        {
            templateUrl: "js/template/app.html",
            controller: "AppCtrl2"
        });
    }]);


});

Answer 1

在angular concepts之后，从另一个控制器调用控制器方法实际上并不是一个好主意。

在您的情况下，一种解决方案是使用公共服务来获取联系人

app.factory("contactsService",function(){
     return {
         getContacts: function(){
            return $http({
                method: 'GET', 
                url:'php/listContacts.php'
            });
         }
     }
})

将它注入你想要的一切：

app.controller("SearchContacts", function($scope,$route,$http, contactsService){

    console.log($route.current.params.query);
    if($route.current.params.query !== undefined){
        contactsService.getContacts().then(function(response){
             $scope.contacts = response.data;            
        })
    }

    $scope.search = function() {
        console.log($('#frmSearchContacts').serialize());
        $scope.contacts = null;
    };

});

此外，您可以使用广播事件，但在我看来，使用服务是这种情况下的最佳解决方案。

Answer 2

你可以打电话

$broadcast('eventname', data)

在一个控制器中，并使用

接收它

$on('eventname', function (data) {});

在另一个。

Answer 3

此处的问题不在于您的控制器，而在于数据的表示。

在两个控制器中，您已经定义了如何获取联系人（在列表控制器中）以及如何在js/template/list.html中显示0..n联系人。

根据模板的设置方式，您可以使用它进行显示，并定义SearchController以填充联系人：

    .when("/searchcontacts",
    {
        templateUrl: "js/template/search.html",
        controller: "SearchContacts"
    })
    .when("/searchcontacts/:query",
    {
        templateUrl: "js/template/list.html", // notice here
        controller: "SearchContacts"
    })

这与angular.js tutorial显示电话列表或详细信息的方式非常相似。

如果您的搜索模板中还有其他内容需要包含在列表中，您可以将联系人列表提取到另一个模板，并使用ng-include在js/template/search.html和js/template/list.html中使用该重复模板ng-include。

编辑：为了更好地证明我的意思，我使用{{1}}方法创建了example on plunkr作为元素和属性。

Angularjs控制器：如何在另一个控制器中调用控制器？

3 个答案: