Передача массива из json-файла в угловую настраиваемую директиву

Question

Я разрабатываю свой собственный тег в angular.js.

мое определение:

 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'); 
     } 
    }); 

Я следующий JSon файл

 [{ 
     "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"}]}] 

В главном HTML файле У меня есть вызов тега, как это

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

Это отлично работает, но я хочу позвонить по телефону

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

, но это дает мне следующую ошибку

Что я делаю неправильно? Как я могу отлаживать как ng-repeat тот, который указан на странице, так и тот, который указан в пользовательской директиве?

Благодаря

Answer 1

Ваша директива должна быть

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

Используется compos="tab.compos" несмотря на compos="{{tab.compos}}