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

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 # has no method 'getMainCategories'

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

编辑：

我使用下面的方法同时加载了两个应用；

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

我绝对可以在这里使用服务，但我想知道是否有其他选择可以做到这一点！

Answer 1

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

拥有两个想要访问相同数据的控制器是您需要服务的典型标志。 Angular 团队推荐将视图和服务粘合在一起的瘦控制器。特别是“服务应该在控制器之间保持共享状态”。

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

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

您可以使用事件，但它们只是为想要解耦的两方之间的通信而设计的。在上面的视频中，Misko 指出了它们如何使您的应用程序更加脆弱。 “大多数情况下，注入服务和进行直接通信是首选且更健壮的”。 （从 53:37 开始查看上面的链接，听听他谈论这个）

Answer 2

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

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 模块作为对声明 angular.module 的 secondApp 的依赖项包含在内。这样您就可以与其他应用通信。

Answer 3

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

通过同样的方式我们可以在指令中使用共享服务。我们可以将控制器部分实现为指令并使用$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 处理程序进行更改。