2013-06-03 17 views
5

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.Modülün denetleyici işlevini, tamamen ayrı bir modülün denetleyicisinden nasıl ararsınız?

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

+0

için henüz test uygulamasına bu kodu çekti değil ve onunla oynadı ama her şeyi doğru yapıyoruz gibi bana görünüyor - YouTube şeyler için kod bana balık görünüyor. GitHub'daki kodun burada kodla eşleşmediğini fark ettim; açısal-youtube kodunu güncellemeyi deneyebilirsiniz. –

cevap

2

İ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()

+0

Teşekkürler, neredeyse orada olduğumdan şüphe ettim, hepsi işleyicinin kapsamını geçiyordu. – xcession

İlgili konular