javascript - add an object declared on the controller in Angular JS -
i angularjs beginner , have issue. want add data media-object in html using object declared in script inside controller, can't find directive must use.
here code:
<!doctype html> <html lang="en" ng-app="confusionapp"> <head> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- above 3 meta tags *must* come first in head; other head content must come *after* these tags --> <title>ristorante con fusion: menu</title> <!-- bootstrap --> <link href="../bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"> <link href="../bower_components/bootstrap/dist/css/bootstrap-theme.min.css" rel="stylesheet"> <link href="../bower_components/font-awesome/css/font-awesome.min.css" rel="stylesheet"> <link href="styles/bootstrap-social.css" rel="stylesheet"> <link href="styles/mystyles.css" rel="stylesheet"> <!-- html5 shim , respond.js ie8 support of html5 elements , media queries --> <!-- warning: respond.js doesn't work if view page via file:// --> <!--[if lt ie 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> </head> <body> <div class="container"> <div class="row row-content" ng-controller="dishdetailcontroller dishctrl"> <div class="col-xs-12"> <div class="media"> <div class="media-left media-middle"> <a href="#"> <img class="media-object img-thumbnail" ng-src={{dish.image}} alt="uthapizza"> </a> </div> <div class="media-body"> <h4 class="media-heading">{{dish.name}}<span class="label label-danger">{{dish.label}}</span><span class="badge">{{dish.price | currency}}</span></h4> <p>{{dish.description}}</p> </div> </div> </div> <div class="col-xs-9 col-xs-offset-1"> <p>put comments here</p> </div> </div> </div> <script src="../bower_components/angular/angular.min.js"></script> <script> var app = angular.module('confusionapp',[]); app.controller('dishdetailcontroller', function() { var dish = { name:'uthapizza', image: 'images/uthapizza.png', category: 'mains', label:'hot', price:'4.99', description:'a unique combination of indian uthappam (pancake) , italian pizza, topped cerignola olives, ripe vine cherry tomatoes, vidalia onion, guntur chillies , buffalo paneer.', comments: [ { rating:5, comment:"imagine eatables, living in confusion!", author:"john lemon", date:"2012-10-16t17:57:28.556094z" }, { rating:4, comment:"sends heaven, wish mother-in-law eat it!", author:"paul mcvites", date:"2014-09-05t17:57:28.556094z" }, { rating:3, comment:"eat it, eat it!", author:"michael jaikishan", date:"2015-02-13t17:57:28.556094z" }, { rating:4, comment:"ultimate, reaching stars!", author:"ringo starry", date:"2013-12-02t17:57:28.556094z" }, { rating:2, comment:"it's birthday, we're gonna party!", author:"25 cent", date:"2011-12-02t17:57:28.556094z" } ] }; this.dish = dish; }); </script> </body> </html>could me? think it's easy know have collapsed!
thank you
you have @ least 2 options.
option 1: use $scope. make sure html remains unchanged
app.controller('dishdetailcontroller', function($scope) { // dish declaration $scope.dish = dish; }); option 2: javascript remains unchanged. in html, prefix dish dishctrl since use dishdetailcontroller dishctrl
ex: instead of <img class="media-object img-thumbnail" ng-src={{dish.image}} alt="uthapizza">, use
<img class="media-object img-thumbnail" ng-src={{dishctrl.dish.image}} alt="uthapizza"> 
Comments
Post a Comment