На моем сайте есть плеер, который показывает, какую песню я сейчас слушаю. Однако, чтобы обновить отображаемую песню, мне пришлось обновить страницу.
На данный момент я хочу, чтобы код проверял внешний файл json. Он должен проверить название песни и при обнаружении изменения обновить проигрыватель на веб-сайте.
К сожалению, здесь я натыкаюсь на блокпост.
Сначала я попытался использовать функцию $interval, хотя она и работала, она обновляла <div>, как обновление страницы.
Я попробовал функцию scope.$watch, но она не работает. Похоже, $watch срабатывает только один раз при загрузке страницы. Это может быть связано с тем, что область действия не является слушателем. Однако, когда я пытаюсь добавить прослушиватель, мне нужно изменить модуль, так как это директива...
angular.module('lastfm-nowplaying', [])
.directive('lastfmnowplaying', ['uiCreation', 'lastFmAPI', 'lastFmParser', '$http', function (uiCreation, lastFmAPI, lastFmParser, $http) {
var link = function (scope, element, attrs) {
$http({
method: 'GET',
url: 'https://ws.audioscrobbler.com/2.0/?method=user.getrecenttracks&user=--NAME--&api_key=--API--&format=json&limit=1'
}).then(function (songdata) {
var currentsongs = songdata.data.recenttracks.track[0].name;
console.log(songdata);
console.log(currentsongs);
}, function (error) {
//oopsie
});
scope.$watch('currentsongs', function (value) {
load(value);
console.log("Change detected");
}, true);
var load = function () {
var latestTrack;
if (scope.config) {
if (scope.config.apiKey) {
lastFmAPI.getLatestScrobbles(scope.config).then(function (data) {
latestTrack = lastFmParser.getLatestTrack(data);
angular.element(element).addClass('lastfm-nowplaying');
uiCreation.create(element[0], scope.config.containerClass, latestTrack);
}, function (reason) {
//Last.fm failure
});
} else {
var latestTrack = {
title: scope.config.title,
artist: scope.config.artist,
largeImgUrl: scope.config.imgUrl,
xLargeImgUrl: scope.config.backgroundImgUrl,
}
angular.element(element).addClass('lastfm-nowplaying');
uiCreation.create(element[0], scope.config.containerClass, latestTrack);
}
}
}
};
return {
scope: {
config: '=config'
},
link: link
};
}])
HTML
<body ng-app="app" ng-controller="mainCtrl">
<div lastfmnowplaying config="lastFmConfig"></div>
</body>
Итак, через консоль я могу вызвать файл json и получить название песни, но я не могу обновить проигрыватель с помощью scope.$watch, он срабатывает только один раз (?)
Я знаю только основы Angular, и поэтому я не смогу решить это самостоятельно в ближайшее время.
