CODEWITHSUNDEEP
angularjsjson
Manju
Manju

Reputation: 2640

How to create a custom directive for a JSON response received

I wanted to create a custom directive addressing the scope to one of the object

JavaScript: 

var module = angular.module('myApp', []);

module.controller('FoodCourtMenuController', function ($scope) {
$scope.GetMenu = function () {
    var json = '[{"FoodCourtName":"Fiesta","FoodCourtDetails":[{"VendorName":"Adigas","VendorDetails":[{"FoodTypeName":"Breakfast","FoodTypeDetails":[{"Name":"Aloo paratha","Price":"Rs. 60","IsVeg":"True","ItemDetails":"2 nos"},{"Name":"North indian meal","Price":"Rs. 60","IsVeg":"True","ItemDetails":"sweet + roti"}]},{"FoodTypeName":"Lunch","FoodTypeDetails":[{"Name":"Dosa","Price":"Rs. 60","IsVeg":"True","ItemDetails":""},{"Name":"South indian meal","Price":"Rs. 80","IsVeg":"True","ItemDetails":"sweet + rice"}]}]},{"VendorName":"Kaamath","VendorDetails":[{"FoodTypeName":"Breakfast","FoodTypeDetails":[{"Name":"Sprouts","Price":"Rs. 60","IsVeg":"True","ItemDetails":"2 nos"},{"Name":"Fruit bowl","Price":"Rs. 60","IsVeg":"True","ItemDetails":"sweet + roti"}]},{"FoodTypeName":"Lunch","FoodTypeDetails":[{"Name":"Idly","Price":"Rs. 60","IsVeg":"True","ItemDetails":""},{"Name":"Palav","Price":"Rs. 80","IsVeg":"True","ItemDetails":"sweet + rice"}]}]}]},{"FoodCourtName":"Magna","FoodCourtDetails":[{"VendorName":"Polar Bear","VendorDetails":[{"FoodTypeName":"Breakfast","FoodTypeDetails":[{"Name":"Vanilla","Price":"Rs. 40","IsVeg":"True","ItemDetails":"2 nos"},{"Name":"Chocolate","Price":"Rs. 60","IsVeg":"True","ItemDetails":"3 nos"}]}]},{"VendorName":"Wonder Chicken","VendorDetails":[{"FoodTypeName":"Dinner","FoodTypeDetails":[{"Name":"Chicken","Price":"Rs. 100","IsVeg":"False","ItemDetails":"4 nos"}]}]}]}]';
    var resultJSON = eval('(' + json + ')');
    $scope.resultJSON = resultJSON;
}
});

module.directive('foodItem', function () {
var directive = {};
directive.restrict = 'AEC';
directive.template = '{{FoodCourtName}}';
directive.scope = {
    FoodCourtName: "=FoodCourtName"
}
return directive;
});

HTML:

<div ng-controller="FoodCourtMenuController">
    <input type="search" ng-model="txtSearch" name="txtSearch" placeholder="Search menu" />
    <br />
    <input type="button" ng-click="GetMenu()" value="Get Menu" />

<div id="menu" ng-repeat="x in resultJSON">
        <foodItem FoodCourtName="{{x.FoodCourtName}}"></foodItem> <!--1st scenario-->
        <span food-item food-court-name="{{x.FoodCourtName}}"></span> <!--2nd scenario-->
        <food-item food-court-name="{{x.FoodCourtName}}"></food-item> <!--3rd scenario-->
    </div>
</div>

I'm able to populate the data as below using ng-bind, I wanted to use the custom directive, so that i get a better understanding of the same.

Solution would be really appreciated. Thanks in advance.

<div id="menu"  ng-repeat="foodCourt in resultJSON">
            <div ng-repeat="vendor in foodCourt.FoodCourtDetails">
                <div ng-repeat="foodType in vendor.VendorDetails">
                    <div ng-repeat="foodItem in foodType.FoodTypeDetails">
                        <div style="border-bottom:1px solid #000;">
                            <span ng-bind="foodCourt.FoodCourtName" style="padding:10px;"></span>
                            <span ng-bind="vendor.VendorName" style="padding:10px;"></span>
                            <span ng-bind="foodType.FoodTypeName" style="padding:10px;"></span>
                            <span ng-bind="foodItem.Name" style="padding:10px;"></span>
                            <span ng-bind="foodItem.Price" style="padding:10px;"></span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

Upvotes: 0

Views: 487

Answers (1)

Alexander Shabalin
Alexander Shabalin

Reputation: 98

In directive restrict you set E (element), so you have to use tag(element), not just an attribute.

Upvotes: 1

Related Questions