Question

我想创建一个自定义指令，将范围扩展到其中一个对象

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>

我可以使用ng-bind填充下面的数据，我想使用自定义指令，这样我就能更好地理解它。

解决方案真的很感激。提前谢谢。

<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>

Answer 1

在指令中限制你设置E（元素），所以你必须使用tag（element），而不仅仅是属性。

如何为收到的JSON响应创建自定义指令

1 个答案: