The user directive to call the $ scope function calls $ rootScope: infdig

Question

I tried looking back at the other problems of $ rootScope: infdig here and couldn't find the one that really explained this to me well, or what I understood. Same thing with AngularJs docs. Hope someone can help.

I have a function that I created in the scope $ scope, which takes a single parameter and calls a GET api request and returns a json object with just both "id" and "name". This function then returns the name from the object back to the directive that calls it.

The function is called from the directive, but after that it gets stuck in the error of hundreds of these "rootScope: infdig" per second. The directive also never passes the text of the returned "name". I know that the http call works because I write the "name" in the console after.

Error screen

Here is my controller:

owlyfm.controller('landingPageController', [ "$scope", "$log", "$http", "$location", "apiUrlsService", function ($scope, $log, $http, $location, apiUrlsService) { $http.get("https://api.backand.com:443/1/objects/Albums?pageSize=3&pageNumber=1&deep=true&relatedObjects=true") .success( function(result){ $scope.featuredAlbums = result.data; //$log.info($scope.featuredAlbums); }) .error( function(data, status){ $log.error(data); }); $scope.getAlbumArtist = function(artistId){ $http.get("https://api.backand.com:443/1/objects/Artists/" + artistId) .success(function(result){ var artistsName = result.name; $log.info(artistsName); return artistsName; }); } }]); 

This is where I created the directive:

 owlyfm.directive("featuredAlbum", function(){ return{ restrict: 'E', templateUrl: 'directives/featuredAlbum.html', scope: { albumObject: "=", getAlbumArtistFunction: "&" } } }); 

This is where I call the directive in the view

 <div class="row fluid-container" > <featured-album ng-repeat="featuredAlbum in featuredAlbums" album-object="featuredAlbum" get-album-artist-function="getAlbumArtist(album)" class="col-md-4" ></featured-album> </div> 

And here is the directive itself:

  <div class="featuedAlbum"> <div> <img class="img-responsive" ng-src=" {{albumObject.albumArtUrl}} "/> </div> <h4>{{ albumObject.name }}</h4> <h5>{{ getAlbumArtistFunction( { album: albumObject.Artists } ) }}</h5> <h6>{{ albumObject.releaseDate }}</h6> </div> 

What am I doing

To finish, what I am doing is calling the api to get the album object (I use the "Backand" BTW). When I receive this album object, I visualize the <img> and <h> tags with the data I receive. This works fine.

The album object has its ID, name, Date, imgUrl and "Artists" (this is just an identifier for the artist). Then I use this “artists” identifier to make another call to get the actual Artist object associated with it. This is where the problem arises.

Problem

This is an http call to the artist object, causing an error loop. Despite the fact that I see in the magazine that he receives a json object from artists, he will not send it to the directive.

What i explored

I read that there are problems using ng-repeat with functions from the directive. However, I don’t quite understand why and how it is applicable here, and I don’t know how I would change it to do what I am trying to achieve. All other questions are a little higher than my head.

If anyone can help me, this will be greatly appreciated.

Answer 1

As stated in the comments, it is not recommended to call a function that will retrieve data from the server’s internal window, because it will call several times when you need to call it only once.

You can add the "artistName" property, which will be set in the "featuredAlbum" constructor.

owlyfm.controller('featuredAlbumController', [ "$scope","$http",function ($scope, $http) { $http.get(" https://api.backand.com:443/1/objects/Artists/ " + $scope.artistId) .success(function(result){ $scope.artistName = result.name; }); }]);

So, $ http will be called only once, at the first start of the controller.