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

我刚刚与Angular握手，但是当我尝试将可重用组件抽象为单独的模块时，传递范围越来越好。如何从完全独立的模块控制器调用模块的控制器功能？

我使用的是这里发现的Angular Youtube模块https://github.com/arnaudbreton/angular-youtube，但它很糟糕，所以我不得不使用新功能，即支持YouTube的Events。

首先，这里从第三方模块相关的片段（有删节）：

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()函数3210与youtubeapi模块。

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

任何指向我要去哪里错了？

来源

2013-06-03 xcession

我还没有将此代码拉入测试应用程序并使用它，但对我来说，它看起来像你做的一切正确 - YouTube的东西的代码看起来很腥。我注意到GitHub上的代码与此处的代码不匹配;你可能想尝试更新angular-youtube代码。 –

隔离范围变量配置正确。 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()

来源

2013-06-03 18:18:58 sh0ber

谢谢你们，我怀疑我几乎在那里，这一切都归结为处理程序的传递范围。 – xcession

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

回答

相关问题