javascript - 将数组从 json 文件传递​​到 Angular 自定义指令

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 和自定义指令中的 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"