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页面中的那个和custom指令中的那个？

由于

Answer 1

你的指示应该是

compos="tab.compos"

尽管compos="{{tab.compos}}

，仍然使用

{"Objects" : [{"Field1:Val1","Field2:Val2"},{"Field1:Val1","Field2:Val2"}]}

将数组从json文件传递给angular自定义指令

1 个答案: