Passing an array from a json file to angular custom directive

Question

I'm developing my own tag in angular.js.

my definition is:

     var mainApp = angular.module("mainApp", []);

     mainApp.directive('tabela', function() {
        var directive = {};
        directive.restrict = 'E';
        directive.template = '<div id="container_{{name}}" style="background:white; border: 1px solid ; width: 250px; height: 250px;overflow: hidden;vertical-align: baseline"> \
            <div id="titleBar_{{name}}" style="width: 100%;border-bottom: 1px solid;display: flex;"> \
                <div id="text_{{name}}" style="width: 50%; float: left;"> \
                    {{tabela}} \
                </div> \
                <div id="button_{{name}}" style="width:50%; float: right;" align="center"> \
                    <button type="button" id="addField_{{name}}">add field</button> \
                </div> \
            </div> \
            <!--<hr style="width: 100%">--> \
            \
            <div id="fieldList_{{name}}"> \
                <div ng-repeat="camp in campos" id="field_{{name}}"> \
                    <span id="text" style="width: 50%; float: left;"> \
                        {{camp.campo}} \
                    </span> \
                    <span id="button_{{name}}" style="width:50%; float: right;" align="center"> \
                       {{camp.tipo}} \
                    </span> \
                </div> \
        </div> \
    </div>';

        directive.scope = {
            name:"@name",
            tabela:"@tabela",
            campos:"="
        }

        directive.compile = function(element, attributes) {
           var linkFunction = function($scope, element, attributes) {
           }
           return linkFunction;
        }

        return directive;
     });

     mainApp.controller('TabelasController', function ($scope,testService) {

        function Init() {

        $scope.data = {};
                testService.getData().then(function(data) {
                    $scope.tabelas=data.data;

        });
        }
        Init();

                });
        mainApp.service('testService', function ($http) {
        this.getData = function () {
        return $http.get('data.json');
        }
     });

I have the following json file

     [{
         "name": "tab1aaa",
         "tabela": "tabela1aaa",
         "campos":[{"campo":"campo1aaa1","tipo":"integer"},{"campo":"campo1aaa2","tipo":"varchar"}]},
     {
         "name": "tab2bbb",
         "tabela": "tabela2bbb",
         "campos":[{"campo":"campo2bbb1","tipo":"integer"},{"campo":"campo2bbb2","tipo":"varchar"}]}]

In the main html file I have a call to the tag like this

         <tabela ng-repeat="tab in tabelas"  name="{{tab.name}}" tabela="{{tab.tabela}}" campos="[{campo:'campo1A',tipo:'integer'},{campo:'campo2A',tipo:'varchar'}]"  class="tabela ui-widget-content"></tabela>

This works fine but I want to make a call like this

         <tabela ng-repeat="tab in tabelas"  name="{{tab.name}}" tabela="{{tab.tabela}}" campos="{{tab.campos}}"  class="tabela ui-widget-content></tabela>

but it gives me the following error

What am I doing wrong? How can I debug both ng-repeat the one in the page and the one in the custom directive?

Thanks

Mi-Creativity · Accepted Answer · 2016-02-12 15:53:33Z

1

Your directive should be

<tabela ng-repeat="tab in tabelas"  name="{{tab.name}}" tabela="{{tab.tabela}}" campos="tab.campos"  class="tabela ui-widget-content></tabela>

Used compos="tab.compos" in spite of compos="{{tab.compos}}

edited Feb 12, 2016 at 15:53

Mi-Creativity

9,66410 gold badges40 silver badges49 bronze badges

answered Feb 12, 2016 at 15:49

Vinod Singh

262 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

davidmr Over a year ago

It worked! Thanks! Can you, please, explain why? Aparently from what I understood so far to make the bind it should need the {{....}}

Collectives™ on Stack Overflow

Passing an array from a json file to angular custom directive

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related