Question

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

我正在使用此处https://github.com/arnaudbreton/angular-youtube找到的Angular Youtube模块，但它非常不合适，因此我正在使用新功能，即支持youtube API的事件。

首先，这是来自第三方模块的相关片段（删节）：

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

然后是我自己的模块：

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!')
    }
}]);

以及相关的模板：

<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>

您将看到我正在努力将myeventhandler() myAppCtrl函数与youtubeapi模块相关联。

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

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

Answer 1

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

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

然后，您可以修改create以接受新参数：

player.create = function (attrs, handler) {

同样在create内，将attrs.onEvent()更改为handler()

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

1 个答案: