Modülün denetleyici işlevini, tamamen ayrı bir modülün denetleyicisinden nasıl ararsınız?

Question

Sadece Angular ile kavramak için gidiyorum, ancak yeniden kullanılabilir bileşenleri ayrı modüller halinde soyutlamaya çalıştığımda kapsamı geçmek benim için daha iyi oluyor.

Burada bulunan Angular Youtube modülünü kullanıyorum https://github.com/arnaudbreton/angular-youtube ama bu yüzden çok yetersiz, youtube API's Events için yeni işlevler, yani yeni işlevler üzerinde duruyorum.

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

Sonra kendi modülü var:

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

ve ilgili şablonu:

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

Birincisi, burada üçüncü şahıs modülünden ilgili pasajı (özet) var

Gördüğünüz gibi ben işlevini bağlamak için mücadele ediyorummodülü ile.

Ayrıca, İzolasyon kapsamı değişkenlerini doğru bir şekilde yapılandıracağımdan emin değilim. Bu yüzden, bir kapsam işlevini şablona aktarıldığında gördüğüm gibi bir bağlantı işlevi değil.

Nerede yanlış olduğum hakkında herhangi bir işaretçi var mı?

Answer 1

İzolama kapsamı değişkenleri doğru şekilde yapılandırılmıştır. attrs.onEvent() işe yarar çünkü öznitelikler ifadelerden ziyade dizelerdir. Daha sonra yeni bir parametre kabul etmek create değişiklik yapacağı

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

: Yine direktif onun izolatı kapsamı değişkeni kullanarak servise olay işleyicisi geçebilir create içindedir

player.create = function (attrs, handler) { 

Ve attrs.onEvent() değiştirmek handler()