0

これは AngularJS での私の最初のプロジェクトであり、しばらく試してみたいと思っていたものです。Foundation Apps Framework (Angular 上に構築) を使用していますが、サービス変数の設定に問題があります。

サービス変数がアプリのプレーヤー (Videogular プラグインを使用) の「現在再生中」のトラックリストを格納するというアイデアは、ショッピング バスケットと同様の方法であると思います。

「現在再生中」のトラックリストを取得するのに問題はありませんが、トラックリストをテスト データで設定ng-click="setTracklist()できないようです (テスト目的で単純なボタンを使用) 。

どんな提案でも本当に感謝しています。非常に単純な問題のように思われる場合は、申し訳ありませんが、これは私にとって大きな学習曲線です。

サービス(app.js)

(function() {
  'use strict';

  angular.module
    .service('nowPlaying', function($sce) {

    var tracklist = [{"info": [{"title": "Lies (Tourist Remix)","artist": "CHRVCHES","artwork": "https://i1.sndcdn.com/artworks-000062986758-w3vnj1-t500x500.jpg","service": "SoundCloud","url": "https://soundcloud.com/kislacansu/chvrches-lies-tourist-remix","order": "0"}],"sources":[{"src":$sce.trustAsResourceUrl('http://api.soundcloud.com/tracks/120555166/stream?client_id=b49f9732e4efc7dc0e497012d17b2695'),"type":"audio/mpeg"}]},{"info": [{"title": "Midnight (Jon Hopkins Remix)","artist": "Coldplay","artwork": "http://geo-media.beatport.com/image_size/500x500/9453088.jpg","service": "Dropbox","url": "http://dropbox.com","order": "1"}],"sources": [{"src": $sce.trustAsResourceUrl('https://www.dropbox.com/s/hmmrarbb6jry2id/04%20Midnight%20%28Jon%20Hopkins%20Remix%29.mp3?dl=1'),"type": "audio/mpeg"}]},{"info": [{"title": "Lovers in Japan","artist": "Coldplay","artwork": null,"service": "YouTube","url": "https://www.youtube.com/watch?v=G7miUwfuWLU","order": "2"}],"sources": [{"src": "https://www.youtube.com/watch?v=0c4tjuw3NWg","type": "video/mp4"}]},{"info": [{"title": "All We'll Know","artist": "The Hics","artwork": "https://i1.sndcdn.com/artworks-000078234891-3ua2os-t500x500.jpg","service": "SoundCloud","url": "https://soundcloud.com/the-hics/all-well-know","order": "3"}],"sources": [{"src": $sce.trustAsResourceUrl('http://api.soundcloud.com/tracks/147550599/stream?client_id=b49f9732e4efc7dc0e497012d17b2695'),"type": "audio/mpeg"}]}];

    this.setTracklist = function(){
        tracklist = [{"info": [{"title": "All We'll Know","artist": "The Hics","artwork": "https://i1.sndcdn.com/artworks-000078234891-3ua2os-t500x500.jpg","service": "SoundCloud","url": "https://soundcloud.com/the-hics/all-well-know","order": "3"}],"sources": [{"src": $sce.trustAsResourceUrl('http://api.soundcloud.com/tracks/147550599/stream?client_id=b49f9732e4efc7dc0e497012d17b2695'),"type": "audio/mpeg"}]}];
        console.log("something else");

        console.log(tracklist);
        return tracklist;
    }

    this.getTracklist = function() {
        return tracklist;
    };

 })
  ;

})();

コントローラー(app.js)

angular.module('application')
.controller('indexCtrl', indexCtrl)
;
indexCtrl.$inject = ['$scope', '$stateParams', '$state', '$controller', '$http', '$sce', '$timeout', 'nowPlaying'];
function indexCtrl($scope, $stateParams, $state, $controller, $http, $sce, $timeout, nowPlaying) {

//Other Videogular code has been edited out...

//Controller videos gets service tracklist
controller.videos = nowPlaying.getTracklist();

controller.config = {
    preload: "auto",
    autoHide: false,
    autoHideTime: 3000,
    autoPlay: true,
    sources: controller.videos[0].sources,
    load: false,
    transclude: true,
    controls: undefined,
    theme: {
        url: "http://www.videogular.com/styles/themes/default/latest/videogular.css"
    },
    plugins: {
        poster: controller.posters
    }
};

controller.setVideo = function(index) {
    controller.API.stop();
    controller.currentVideo = index;
    controller.config.sources = controller.videos[index].sources;
    $timeout(controller.API.play.bind(controller.API), 100);
    };      
}
4

1 に答える 1

2

this関数のコンテキストによって this の値が変更されるため、キーワードは使用しないでください。代わりに次のようにします。

var _this = this;
_this.setTracklist = function(){}

serviceまた、を使用して html ページから関数を呼び出すことはできませんng-click。コントローラーで関数を呼び出す必要があります。

controller.setTracklist = function() {
   nowPlaying.setTracklist();
}
于 2015-05-03T12:31:37.677 に答える