如何从完全独立的模块控制器中调用模块的控制器功能？

I'm just getting to grips with Angular, but passing around scope is getting the better of me when I try to abstract reusable components into separate modules.

我只是想要处理Angular,但当我尝试将可重用组件抽象为单独的模块时,传递范围对我来说变得越来越好。

I'm using an Angular Youtube module found here https://github.com/arnaudbreton/angular-youtube but it's woefully inadequate so I'm bolting on new functionality, namely support for the youtube API's Events.

我正在使用这里找到的Angular Youtube模块https://github.com/arnaudbreton/angular-youtube,但是它非常不合适,所以我正在使用新功能,即支持youtube API的事件。

First, here's the pertinent snippet from the third party module (abridged):

首先,这是来自第三方模块的相关片段(删节):

angular.module('youtube', ['ng'])

    .service('youtubePlayerApi', ['$window', '$rootScope', '$log', function ($window, $rootScope, $log) {
        var player = $rootScope.$new(true);

        player.playerContainer = null;

        player.create = function (attrs) {          
            player.playerId = attrs.id;
            player.videoId = attrs.videoId;

            return new YT.Player(this.playerId, {
                videoId: attrs.videoId,

                events:{
                    onStateChange: function(event){
                        switch(event.data){
                            case YT.PlayerState.PLAYING:
                                attrs.onEvent()
                                break;
                        }
                    }
                }
            });
        };

        player.load = function(){
            this.playerContainer = player.create();
        }

        return player;
    }])

    .directive('youtubePlayer', ['youtubePlayerApi', function (youtubePlayerApi) {
        return {
            restrict:'A',
            scope: {
                id:'@',
                videoId:'@',
                onEvent:'&'
            },
            link: function (scope, element, attrs) {
                youtubePlayerApi.create(attrs);
            }
        };
    }]);

Then there's my own module:

然后是我自己的模块:

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

myapp.controller('myAppCtrl', ['$scope', '$rootScope', '$location', '$log', 'youtubePlayerApi', function($scope, $rootScope, $location, $log, youtubePlayerApi) {

    $scope.showVideo = function(){
        $scope.youtubePlayer = youtubePlayerApi.load();
    }

    $scope.myEventHandler = function(){
        alert('finished!')
    }
}]);

and the associated template:

和相关的模板:

<div ng-app="myapp" id="ng-app">
    <div ng-controller="myAppCtrl">
        <div youtube-player id="ytplayer" video-id="0BWD5I6YrIo" on-event="myEventHandler()"></div>
    </div>
</div>

As you'll see I'm struggling to connect the myeventhandler() function of myAppCtrl with the youtubeapi module.

正如您所看到的,我正在努力将myAppCtrl的myeventhandler()函数与youtubeapi模块连接起来。

I'm also not sure I'm configuring the Isolate scope variables correctly as I've only ever seen it done when the scope values are being passed to a template, not a link function like this.

我也不确定我是否正确配置了Isolate范围变量,因为我只是在将范围值传递给模板时才看到它,而不是像这样的链接函数。

Any pointers on where i'm going wrong?

关于我哪里出错的任何指示?

1 个解决方案

#1

The isolate scope variables are configured correctly. attrs.onEvent() does not work because attributes are strings rather than expressions. Still, the directive can pass the event handler to the service using its isolate scope variable:

隔离范围变量已正确配置。 attrs.onEvent()不起作用,因为属性是字符串而不是表达式。仍然,该指令可以使用其isolate范围变量将事件处理程序传递给服务:

link: function (scope, element, attrs) {
    // using the isolate scope binding
    youtubePlayerApi.create(attrs, scope.onEvent); 
}

You would then modify create to accept the new parameter:

然后,您将修改create以接受新参数:

player.create = function (attrs, handler) {

And also within create, change attrs.onEvent() to handler()

并且在create中,将attrs.onEvent()更改为handler()

#1