Неисправность настройки служебной переменной в 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; 
    }; 

}) 
    ; 

})(); 

Контроллер (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 потому что контекст функция изменяет это значение. Есть ли вместо того, чтобы что-то вроде этого:

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

Кроме того, вы не можете вызвать функцию service из вашей HTML страницы с ng-click, необходимо вызвать функцию в контроллере.

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