2
Answers

Call a function inside a directive from controller

Niels Dek

Niels Dek
5y
594
1
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 
  1. angular.module('app', ['lastfm-nowplaying'])  
  2.     .controller('mainCtrl', ['$scope', '$http', '$interval', function ($scope, $http, $interval) {  
  3.   
  4.         $scope.lastFmConfig = {  
  5.             apiKey: 'API',  
  6.             user: 'USER',  
  7.             containerClass: 'content'  
  8.         };  
  9.   
  10.         $scope.$watch('currentsongs', function (CurrentSong, LatestSong) {  
  11.             if (CurrentSong != LatestSong) {  
  12.                 console.log("Change detected");  
  13.                 console.log($scope.songdata);  
  14.             }  
  15.   
  16.         }, true);  
  17.         var checkData = function (songcheck) {  
  18.             $http({  
  19.                 method: 'GET',  
  20.                 url: 'https://ws.audioscrobbler.com/2.0/?method=user.getrecenttracks&user=USER&api_key=API&format=json&limit=1'  
  21.             }).then(function (songdata) {  
  22.                 $scope.songdata = songdata;  
  23.                 $scope.currentsongs = songdata.data.recenttracks.track[0].name;  
  24.                 console.log($scope.currentsongs);  
  25.             }, function (error) {  
  26.                 //oopsie  
  27.             });  
  28.         };  
  29.         checkData();  
  30.         $interval(function () {  
  31.             checkData();  
  32.         }, 10000);  
  33.   
  34.   
  35.   }]);  
  1. angular.module('lastfm-nowplaying', [])  
  2.     .directive('lastfmnowplaying', ['uiCreation', 'lastFmAPI', 'lastFmParser', function (uiCreation, lastFmAPI, lastFmParser) {  
  3.         var link = function (scope, element, attrs) {  
  4.               
  5.             scope.$watch('config', function (value) {  
  6.                 load();  
  7.             });  
  8.   
  9.             var load = function () {  
  10.                 var latestTrack;  
  11.   
  12. //irrelevant-code  
  13.   
  14.   
  15.         };  
  16.         return {  
  17.             scope: {  
  18.                 config: '=config'  
  19.             },  
  20.             link: link  
  21.         };  
  22.   }])   
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.
Answers (2)
Next Recommended Forum