AngularJS Custom Directives


#1

Hello, I just tried to do the AngularJS Custom directive exercise, that with app store. My code is that:

app.controller('MainController', ['$scope', function($scope) {
 $scope.move = {
 icon: 'img/move.jpg',
 title: 'MOVE',
 developer: 'MOVE, Inc.',
 price: 0.99

};

$scope.shutterbugg = {
icon: 'img/shutterbugg.jpg',
title: 'Shutterbugg',
developer: 'Chico Dusty',
price: 2.99
};

$scope.gameboard = {
icon: 'img/gameboard.jpg',
title: 'Gameboard',
developer: 'Armando P.',
price: 1.99
};
}]);
MainController.js

<!doctype html>




<!-- Include the AngularJS library -->
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js"></script>





App Market



<div class="main" ng-controller="MainController">
  <div class="container">
     <div class="card">
       <app-info info="move">
         <img class="icon" ng-src="{{ move.icon }}">
         <h2 class="title">{{ move.title }}</h2>
         <p class="developer">{{ move.developer }}</p>
         <p class="price">{{ move.price | currency }}</p>
       </app-info>
    </div>

    <div class="card">
      <app-info info="shutterbugg">
         <img class="icon" ng-src="{{ shutterbugg.icon }}">
         <h2 class="title">{{ shutterbugg.title }}</h2>
         <p class="developer">{{ shutterbugg.developer }}</p>
         <p class="price">{{ shutterbugg.price | currency }}</p>
      </app-info>
    </div>

    <div class="card">
      <app-info info="gameboard">
         <img class="icon" ng-src="{{ gameboard.icon }}">
         <h2 class="title">{{ gameboard.title }}</h2>
         <p class="developer">{{ gameboard.developer }}</p>
         <p class="price">{{ gameboard.price | currency }}</p>
      </app-info> 
    </div>
  </div>
</div>

<!-- Modules -->
<script src="js/app.js"></script>

<!-- Controllers -->
<script src="js/controllers/MainController.js"></script>

<!-- Directives -->
<script src="js/directives/appInfo.js"></script>



index.html

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


#2

So what problems are you running into? What isn't working or doesn't work correctly?