scope undefined in Link function in Angular

Question

I have been dealing with this problem for a while. Suppose I have the following directive and controller:

angular.module('LiveAPP.artist',[])
.controller('artistCtrl', ['$scope', '$http', '$location', 'dataFactory', '$routeParams', artistCtrl])

.directive("ratestar", function() {
    return {
        restrict: "E",
        template: "<div id='rateYo'></div>",
        link: function( scope, ele, attrs ) {
            console.log(scope.ratingInfo)
            if(scope.reviews === undefined){
              $rateYoMain = $(ele).rateYo({
                rating:3
              })
            } else {
            var $rateYo = $(ele).rateYo({
              starWidth: "20px",
              rating:scope.review.number_of_stars
            });
          }

        }
    };
})

function artistCtrl($scope, $http, $location, dataFactory, $routeParams){

    $scope.artistName = $routeParams.artistname;

    $scope.$watch( 'artistName', function( newValue, oldValue ) {
      dataFactory.checkDb( newValue ).then(function(dbData){
        if(dbData.data != "No data"){
          $scope.artistInfo = dbData.data[0];
          $scope.reviews = dbData.data[1];
          $scope.ratingInfo = dataFactory.avgReview($scope.reviews);
        } else{
          dataFactory.artistInfoAPIs(newValue);
        }
      })
    });

    $scope.$on('artist:updated', function(event, data){
      $scope.artistInfo = data;
    });


    $scope.ratingInfo = "12";

    $scope.artistInfo = {
      artist_name: dataFactory.artistInfo.artist_name,
      artist_genre: dataFactory.artistInfo.artist_genre,
      artist_imageurl: dataFactory.artistInfo.artist_imageurl,
      artist_bio: dataFactory.artistInfo.artist_bio
    };



}

The associated view is the following:

<div class="mainstar"><ratestar></ratestar></div>
<div class='reviews' ng-repeat="review in reviews"> 
  <ratestar class="reviewstars"></ratestar>
</div>

I having an issue with the scope in the link function. When artistName changes there is a GET request that is sent to the database, which then responds with the correct data. The data that I am concerned about is what gets assigned to $scope.ratingInfo in the promise callback. The weird thing is that this data is 12 when I console.log(scope.ratingInfo) in the link function only for <div class="mainstar"><ratestar></ratestar></div> but not for the <ratestar></ratestar> s in the ng-repeat. Getting '12' makes sense since that is how I define it when the controller is instantiated. Ideally I would like to see the data in the same way that I am seeing it when it comes to <ratestar></ratestar> s in the ng-repeat. I can't seem to figure this out. Anyone have any idea whats going on here?

Not sure but have you try to bind an object instead: `$scope.ratingInfo = {value: "12"}` ? [ngRepeat, primitive, parent scope](http://stackoverflow.com/questions/14049480/what-are-the-nuances-of-scope-prototypal-prototypical-inheritance-in-angularjs/14049482#14049482) — MamaWalter, Jun 23 '15 at 20:56

Alexandre · Answer 1 · 2015-06-23T21:14:58.987

0

Could you try this ?

<div class="mainstar"><ratestar ratingInfo="ratingInfo" review="review"></ratestar></div>
<div class='reviews' ng-repeat="review in reviews"> 
  <ratestar class="reviewstars" ratingInfo="ratingInfo" review="review"></ratestar>
</div>

.directive("ratestar", function() {
    return {
        restrict: "E",
        template: "<div id='rateYo'></div>",
        scope: {
           ratingInfo : '=ratingInfo',
           review: '=review'
        },
        link: function( scope, ele, attrs ) {
            console.log(scope.ratingInfo)
            if(scope.reviews === undefined){
              $rateYoMain = $(ele).rateYo({
                rating:3
              })
            } else {
            var $rateYo = $(ele).rateYo({
              starWidth: "20px",
              rating:scope.review.number_of_stars
            });
          }
        }
    };
});

edited Jun 23 '15 at 21:14

answered Jun 23 '15 at 20:39

Alexandre

1,940
1
14
21

`scope.ratingInfo` is now undefined across the board. I think my problem has to do with the asynchronous nature of Angular. I just dont get it because all ''s are the same within my view. – theamateurdataanalyst Jun 23 '15 at 20:47
I do an update on my previous post. The idea is to past explicitly the rating Info variable to the directive and make a bidirectional binding with '=model' – Alexandre Jun 23 '15 at 21:04
Hm. That fixes the problem with `scope.ratingInfo`, but now I have lost access to `scope.review` – theamateurdataanalyst Jun 23 '15 at 21:11
You can apply the same method for review, i made an update – Alexandre Jun 23 '15 at 21:15
This isn't working. I think I was close with my original code. I just don't get why the first one console logs as undefined. – theamateurdataanalyst Jun 23 '15 at 21:20

scope undefined in Link function in Angular

1 Answers1