与来自不同控制器的指令交互

时间:2014-07-08 11:58:28

标签: javascript angularjs

我实施了包含plangular实验的指令

这里是代码:

as.directive('plangular', function ($document, $rootScope, $http) {
    // Define the audio engine
    var audio = $document[0].createElement('audio');

    // Define the player object
    var player = {
      track: false,
      playing: false,
      paused: false,
      tracks: null,
      i: null,
      play: function(tracks, i) {
        if (i == null) {
          tracks = new Array(tracks);
          i = 0;
        };
        player.tracks = tracks;
        player.track = tracks[i];
        player.i = i;
        if (player.paused != player.track) audio.src = player.track.stream_url + '?client_id=' + clientID;
        audio.play();
        player.playing = player.track;
        player.paused = false;
      },
      pause: function() {
        audio.pause();
        if (player.playing) {
          player.paused = player.playing;
          player.playing = false;
        };
      },
      // Functions for playlists (i.e. sets)
      playPlaylist: function(playlist) {
        if (player.tracks == playlist.tracks && player.paused) player.play(player.tracks, player.i);
        else player.play(playlist.tracks, 0);
      },
      next: function(playlist) {
        if (!playlist){
          if (player.i+1 < player.tracks.length) {
            player.i++;
            player.play(player.tracks, player.i);
          } else {
            player.pause();
          };
        } else if (playlist && playlist.tracks == player.tracks) {
          if (player.i + 1 < player.tracks.length) {
            player.i++;
            player.play(playlist.tracks, player.i);
          } else {
            player.pause();
          };
        };
      },
      previous: function(playlist) {
        if (playlist.tracks == player.tracks && player.i > 0) {
          player.i = player.i - 1;
          player.play(playlist.tracks, player.i);
        };
      }
    };

    audio.addEventListener('ended', function() {
      $rootScope.$apply(function(){
        if (player.tracks.length > 0) player.next();
        else player.pause();
      });

    }, false);

    // Returns the player, audio, track, and other objects
    return {
      restrict: 'A',
      scope: true,
      link: function (scope, elem, attrs) {
        // RESOLVE THE AUDIO
        var params = { url: attrs.src, client_id: clientID, callback: 'JSON_CALLBACK' }
        $http.jsonp('//api.soundcloud.com/resolve.json', { params: params }).success(function(data){
          // Handle playlists (i.e. sets)
          if (data.tracks) scope.playlist = data;
          // Handle single track
          else if (data.kind == 'track') scope.track = data;
          // Handle all other data
          else scope.data = data;
        });
        scope.player = player;
        scope.audio = audio;
        scope.currentTime = 0;
        scope.duration = 0;

        // Updates the currentTime and duration for the audio
        audio.addEventListener('timeupdate', function() {
          if (scope.track == player.track || (scope.playlist && scope.playlist.tracks == player.tracks)){
            scope.$apply(function() {
              scope.currentTime = (audio.currentTime * 1000).toFixed();
              scope.duration = (audio.duration * 1000).toFixed();
            });  
          };
        }, false);

        // Handle click events for seeking
        scope.seekTo = function($event){
          var xpos = $event.offsetX / $event.target.offsetWidth;
          audio.currentTime = (xpos * audio.duration);
        };
      }
    }
  });

这是我在index.html视图中使用它的方法。

      <section plangular data-src="https://soundcloud.com/a-beautiful-place-1/the-stoners-guide-to-the-galaxy" class="measure-wide wrap mb4">
        <div>
          <div class="controllButton">
              <a href ng-click="player.play(track)" ng-hide="player.playing == track" class="button button-geo anim-popin">
                <div class=""><img src="lib/player_js/icons/play.png" /></div>
              </a>
              <a href="" ng-click="player.pause()" ng-show="player.playing == track" class="button button-geo anim-popin">
                <div> <img src="lib/player_js/icons/pause.png" /> </div>
              </a>
          </div>
          <div class="controllScrobbler">
              <div class="absolute t0 r0 b0 l0 seekHolder" >
                <div class=" t0 r0 b0 l0 overlaySeeker" ng-click="seekTo($event)"></div>
                <div class=" t0 b0 l0 seeker" style="width: {{ (currentTime / duration) * 100 }}%"></div>
                <div class=" t0 r0 b0 l0 bg-white"></div>
              </div>
          </div>
        </div>

      </section>

现在,它完美无缺。我想做的是与来自不同控制器的指令内的对象播放器进行交互。控制器加载在不同页面的部分中。指令与其他控制器之间没有范围共享。

我期待scope.plangular.player.MyFunctionInsideTheDirective(my args)之类的事情 可能吗?像指令这样的服务,控制器与之交互。

有什么想法吗?

0 个答案:

没有答案