javascript - 在 AngularJS 中设置服务变量时遇到问题

Question

这是我在 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;
    };

 })
  ;

})();

Controller (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);
    };      
}

Answer 1

不要使用 this 关键字，因为函数上下文会更改 this 值。做这样的事情:

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

此外，您无法使用 ng-click 从 html 页面调用 service 函数，您需要调用 Controller 中的函数。

controller.setTracklist = function() {
   nowPlaying.setTracklist();
}