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

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

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

范围文档

在这个退房$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您声明的位置的依赖项angular.module.这样你就可以与其他应用程序进行通信.

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;
});

通过相同的方式,我们可以在指令中使用共享服务.我们可以将控制器部分实现为指令和使用$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分钟视频描述了这一点(通过服务进行控制器通信): 视频

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

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