angularjs - values not getting displayed using angular directive -
i trying add directive in angular , use same display values. values not getting displayed.
my html code
<!doctype html> <html> <head> <link href="https://s3.amazonaws.com/codecademy-content/projects/bootstrap.min.css" rel="stylesheet" /> <link href='https://fonts.googleapis.com/css?family=playfair+display:400,400italic,700italic|oswald' rel='stylesheet' type='text/css'> <link href="css/main.css" rel="stylesheet" /> <script src="js/vendor/angular.min.js"></script> </head> <body ng-app="pizzaplanetapp"> <div class="header" > <h1><span>pizza</span><span>planet</span></h1> </div> <div class="main" ng-controller="maincontroller"> <div class="container"> <h1>specials {{ today | date }}</h1> <h2>appetizers</h2> <div ng-repeat="appetizer in appetizers"> <div class="item col-md-9"> <pizza-info info=appetizer> </pizza-info> </div> </div> </div> </div> <!-- modules --> <script src="js/app.js"></script> <!-- controllers --> <script src="js/controllers/maincontroller.js"></script> <!--directives--> <script src="js/directives/pizzainfo.js"></script> </body> </html> controller
app.controller('maincontroller', ['$scope', function($scope) { $scope.today = new date(); $scope.appetizers = [ { name: 'caprese', description: 'mozzarella, tomatoes, basil, balsmaic glaze.', price: 4.95 }, { name: 'mozzarella sticks', description: 'served marinara sauce.', price: 3.95 }, { name: 'bruschetta', description: 'grilled bread garlic, tomatoes, olive oil.', price: 4.95 } ]; }]); directive(pizzainfo.js)
app.directive('pizzainfo', function(){ return { restirct:'e', scope:{ info:'=' }, templateurl: 'js/directives/pizzainfo.html' }; }); directive html(pizzainfo.html)
<h3 >{{info.name}} </h3> <p > {{info.description}}</p> <p >{{info.price | currency}} </p> i not getting error in console.log. missing here?
syntax error :)) app.directive('pizzainfo', function(){ return { /****/restrict:'e', scope:{ info:'=' }, templateurl: 'js/directives/pizzainfo.html' }; });
Comments
Post a Comment