Apps not showing up but still getting marked as correct


#1

I'm having some issues with my code. I can't get the directive to show up within the actual web page but Codecademy is still marking it as correct and it's not like I'm getting any errors thrown to assist me.

This is my Index.html:

<div class="main" ng-controller="MainController">
  <div class="container">
    
    <div class="card" ng-repeat="app in apps">
       <app-info info="app"></app-info>
    </div>
      
  </div>
</div>

My mainController.js

app.controller('MainController', ['$scope', function($scope) {
$scope.apps = 
  [  
    { 
      icon: 'img/move.jpg', 
      title: 'MOVE', 
      developer: 'MOVE, Inc.', 
      price: 0.99 
    }, 
    { 
      icon: 'img/shutterbugg.jpg', 
      title: 'Shutterbugg', 
      developer: 'Chico Dusty', 
      price: 2.99 
    },
    {
      icon: 'img/gameboard.jpg',
      title: 'Gameboard',
      developer: 'Armando P.',
      price: 1.99
    },
    {
      icon: 'img/forecast.jpg',
      title: 'Forecast',
      developer: 'Forecast',
      price: 1.99
    }
  ]
}]);

and my appInfo.js

app.directive('appInfo', function() {
  return {
    restrict: 'E',
    scope: {
      info: '@' 
    },
    templateUrl: 'js/directives/appInfo.html'
  }
});

I don't know where I have gone wrong so any help is greatly appreciated. Thanks in advance


#2

You have to show me that HTML, or i cant be of help.


#3

I am just learning this, and I am not sure why you use "@" ( it means something for sure :slight_smile: )
However in this example I think you should use "=":

scope: { 
  info: '=' 
},

For me it works then.


#4

My mistake was the new SCRIPT tag in the index.html - this needs to be put at the end (says line 48 in the instructions), NOT the top of the page.