ga-wdi-exercises / project4

[project]
https://github.com/ga-wdi-exercises/project4
2 stars 8 forks source link

Custom Directives Once Again #42

Closed jeffjones89 closed 9 years ago

jeffjones89 commented 9 years ago

https://github.com/ga-dc/pbj-project4/issues/35

So the data is pulling correctly, and my show route is working, but the custom $scope functionality ($scope.eFG, $scope.TS) is coming in as NaN when viewing an individual player, but works on the index page correctly.

The data that comes from the JSON file directly shows up (like player image) just not the custom scope methods.

Wondering if it has to do with the if statement, or if the .get method isn't wired up to the custom scope methods, and only returning the stock JSON objecting?

(function(){
  var directives = angular.module('playerDirectives', []);

  directives.directive('player', ['Player', '$routeParams', '$location', function(Player, $routeParams, $location){
    return{
      templateUrl: "views/players/_player.html",
      replace: true,
      link: function($scope, element, attributes){
        if($routeParams.id){
          console.log($routeParams.id);
          $scope.player = Player.get({id:$routeParams.id});
        }
        var player = $scope.player
        //effective field goal % is a function of three pointers made weighted for the additional point, two pointers made and total field goals attempted
        $scope.eFG = (((Number(player.threePtMade) * 0.5  + Number(player.fgm))/ Number(player.fga)) * 100).toFixed(1);
        //true shooting attempts is a metric used to calculate true shooting %
        $scope.TSA =  (0.44 * Number(player.fta)) + Number(player.fga)
        //true shooting % is a function of total point scored and true shooting attempts
        $scope.TS = ((Number(player.pts)/(2 * $scope.TSA)) * 100).toFixed(1)
      }
    };
  }

]);

})();
RobertAKARobin commented 9 years ago

Add console.dir(player) after your var player = $scope.player. How is it different on the index page from the show page?

jeffjones89 commented 9 years ago

Matt just popped in and we worked out a solution but he thinks there is a better way...I'm including the current code for his reference after lunch.

(function(){
  var directives = angular.module('playerDirectives', []);

  directives.directive('player', ['Player', '$routeParams', '$location', function(Player, $routeParams, $location){
    return{
      templateUrl: "views/players/_player.html",
      replace: true,
      link: function(scope, element, attributes){
        console.log("scope.player", scope.player);

        // add player for show view
        if($routeParams.id){
          console.log($routeParams.id);
          Player.get({id:$routeParams.id}).$promise.then(function(player){
            scope.player = player;
            updateStats(scope);
          });
        } else {
          // index
          updateStats(scope);
        }
      }
    };
  }

]);
function updateStats(directiveScope){
  console.log("2scope.player", directiveScope.player);
  var player = directiveScope.player;
  // console.log("2player", player);
  //effective field goal % is a function of three pointers made weighted for the additional point, two pointers made and total field goals attempted
  directiveScope.eFG = (((Number(player.threePtMade) * 0.5  + Number(player.fgm))/ Number(player.fga)) * 100).toFixed(1);
  //true shooting attempts is a metric used to calculate true shooting %
  directiveScope.TSA =  (0.44 * Number(player.fta)) + Number(player.fga);
  //true shooting % is a function of total point scored and true shooting attempts
  directiveScope.TS = ((Number(player.pts)/(2 * directiveScope.TSA)) * 100).toFixed(1);
}

})();