Question

我试图使用scope变量在第一个控制器中调用第二个控制器的方法。这是我的第一个控制器中的方法：

$scope.initRestId = function(){
        var catapp = document.getElementById('SecondApp');
        var catscope = angular.element(catapp).scope();
        catscope.rest_id = $scope.user.username;
        catscope.getMainCategories();
    };

我可以设置rest_id的值，但出于某种原因我无法调用getMainCategories。控制台显示此错误：

TypeError：Object＃没有方法'getMainCategories'

有没有办法调用上面的方法？

修改

我使用以下方法同时加载两个应用程序;

angular.bootstrap(document.getElementById('firstAppID'), ['firstApp']);
angular.bootstrap(document.getElementById('secondAppID'), ['secondApp']);

我绝对可以在这里使用服务，但我想知道是否还有其他选择可以做同样的事情！

Answer 1

您在两个控制器之间进行通信的最佳方法是使用事件。

Scope Documentation

在此结帐中$on，$broadcast和$emit。

在一般用例中，angular.element(catapp).scope()的使用被设计为在角度控制器之外使用，就像在jquery事件中一样。

理想情况下，您可以在控制器1中将事件写为：

$scope.$on("myEvent", function (event, args) {
   $scope.rest_id = args.username;
   $scope.getMainCategories();
});

在第二个控制器中你只需要

$scope.initRestId = function(){
   $scope.$broadcast("myEvent", {username: $scope.user.username });
};

编辑：意识到这是两个模块之间的沟通

您可以尝试将firstApp模块作为依赖项添加到您声明secondApp的{{1}}。这样你就可以与其他应用程序进行通信。

Answer 2

以下是 Fiddle 中的演示如何通过$scope.$on

在指令和其他控制器中使用共享服务

<强> HTML

<div ng-controller="ControllerZero">
    <input ng-model="message" >
    <button ng-click="handleClick(message);">BROADCAST</button>
</div>

<div ng-controller="ControllerOne">
    <input ng-model="message" >
</div>

<div ng-controller="ControllerTwo">
    <input ng-model="message" >
</div>

<my-component ng-model="message"></my-component>

<强> JS

var myModule = angular.module('myModule', []);

myModule.factory('mySharedService', function($rootScope) {
    var sharedService = {};

    sharedService.message = '';

    sharedService.prepForBroadcast = function(msg) {
        this.message = msg;
        this.broadcastItem();
    };

    sharedService.broadcastItem = function() {
        $rootScope.$broadcast('handleBroadcast');
    };

    return sharedService;
});

以同样的方式我们可以在指令中使用共享服务。我们可以将controller部分实现为指令并使用$scope.$on

myModule.directive('myComponent', function(mySharedService) {
    return {
        restrict: 'E',
        controller: function($scope, $attrs, mySharedService) {
            $scope.$on('handleBroadcast', function() {
                $scope.message = 'Directive: ' + mySharedService.message;
            });
        },
        replace: true,
        template: '<input>'
    };
});

这里有三个控制器，其中ControllerZero用作触发器来调用prepForBroadcast

function ControllerZero($scope, sharedService) {
    $scope.handleClick = function(msg) {
        sharedService.prepForBroadcast(msg);
    };

    $scope.$on('handleBroadcast', function() {
        $scope.message = sharedService.message;
    });
}

function ControllerOne($scope, sharedService) {
    $scope.$on('handleBroadcast', function() {
        $scope.message = 'ONE: ' + sharedService.message;
    });
}

function ControllerTwo($scope, sharedService) {
    $scope.$on('handleBroadcast', function() {
        $scope.message = 'TWO: ' + sharedService.message;
    });
}

使用ControllerOne处理程序ControllerTwo和message监听$scope.$on更改。

Answer 3

每个控制器都有自己的范围，因此导致您的问题。

让两个想要访问相同数据的控制器是您想要服务的经典标志。 angular团队建议瘦控制器只是视图和服务之间的粘合剂。具体而言 - “服务应该在控制器之间保持共享状态”。

令人高兴的是，有一个很好的15分钟视频描述了这一点（通过服务进行控制器通信）：video

Angular的原作者之一Misko Hevery在题为Angular Best Practices的演讲中讨论了这一建议（在这种情况下使用服务）（对于这个主题，请跳至28:08，尽管我非常强烈建议观看全文）。

您可以使用事件，但它们仅用于希望解耦的两方之间的通信。在上面的视频中，Misko注意到他们如何使你的应用程序更加脆弱。 “大多数情况下，注入服务和进行直接沟通是首选且更强大的”。（查看上面的链接从53:37开始，听他谈论这个）

使用AngularJS中的“scope”从另一个控制器调用控制器的方法

3 个答案: