我正在开发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指令中的那个?
由于
答案 0 :(得分:1)
你的指示应该是
compos="tab.compos"
尽管compos="{{tab.compos}}
{"Objects" : [{"Field1:Val1","Field2:Val2"},{"Field1:Val1","Field2:Val2"}]}