Call a function inside a directive from controller

Hi there people of c-sharpcorner,

I got a player that displays the currently or latst played song. Now in order to keep the content updated. I used $interval and $scope.$watch to register the playing song, which displays in the developer console.

Now here's the point I've been stuck on for a few days, since my knowledge of Angular is very limited.

Everytime a change in the songname is detected I want to fire the variable "link" which fires the load() function (this is essentially the one that needs to fire). However, the varbiale is in the controller module. How do I call it?

Like I said, I'm not familiar enough with AngularJS to really edit the code, but I managed to get updated song info, alang with an if-statement so it only fires when a change is detected between the two funtions CurrentSong and LatestSong

angular.module('app', ['lastfm-nowplaying'])
.controller('mainCtrl', ['$scope', '$http', '$interval', function ($scope, $http, $interval) {
$scope.lastFmConfig = {
apiKey: 'API',
user: 'USER',
containerClass: 'content'
};
$scope.$watch('currentsongs', function (CurrentSong, LatestSong) {
if (CurrentSong != LatestSong) {
console.log("Change detected");
console.log($scope.songdata);
}
}, true);
var checkData = function (songcheck) {
$http({
method: 'GET',
url: 'https://ws.audioscrobbler.com/2.0/?method=user.getrecenttracks&user=USER&api_key=API&format=json&limit=1'
}).then(function (songdata) {
$scope.songdata = songdata;
$scope.currentsongs = songdata.data.recenttracks.track[0].name;
console.log($scope.currentsongs);
}, function (error) {
//oopsie
});
};
checkData();
$interval(function () {
checkData();
}, 10000);
}]);

angular.module('lastfm-nowplaying', [])
.directive('lastfmnowplaying', ['uiCreation', 'lastFmAPI', 'lastFmParser', function (uiCreation, lastFmAPI, lastFmParser) {
var link = function (scope, element, attrs) {
scope.$watch('config', function (value) {
load();
});
var load = function () {
var latestTrack;
//irrelevant-code
};
return {
scope: {
config: '=config'
},
link: link
};
}])

I really hate to ask, but I'm really stuck here. If someone could help me out? I feel like the solution is pretty simple.

2 Replies

Know the answer? Post it — somebody with the same question will find it here.

Niels Dek7y ago
Hi Jaimin,

Thanks for sharig the example code. I'm still stuck, since whenever I try to change the return link:link to something like link: function(scope){ link/scope.link} it's not working anymore.

Any help is greatly appreciated
Jaimin Shethiya7y ago
Hope this link will work for you.
https://embed.plnkr.co/plunk/C2G3Cg