0

我想用json数据量重复模板没有错误显示，结果只是显示不完整的html

这是我的代码

experiment.directive('groupsControl', function(){
return {
  restrict: 'E',
  replace: true,
  transclude: false,
  template: '<div class="left"><div ng-repeat="group in children"><section-control sections="group"/></div></div>',
  link: function(scope, element, attrs) {

  }
}})

.directive('sectionControl', function(){
return {
  restrict: 'E',
  replace: true,
  transclude: false,
  scope: { items:'=sections'},

  template: '<div ng-repeat="section in items" ng-include="getIncludeFile(section)">'+
            '</div>',

  link: function(scope, element, attrs) {
    scope.getIncludeFile = function(section) {
        return '/Experiment_management_workspace/Experiment_management_project_angularJs/template/'+section + ".html";
    }


  }
}})

有我的模板

<div><h3>Category1</h3>
<div ng-app="experiment">
  <ui>
    <li><a>{{data1.data1}}</a></li>
    <li><a>{{data1.data1}}</a></li>
  </ui>

json数据

{"name": "test",
    "children":[
{"data": "function4" }, 
{"data": "function4" }, 
{"data": "function4" }]}

我希望它会重复三遍，
但结果只显示“Category1”三遍，我很困惑，请帮忙

4

1 回答 1

0

您提供的代码有效（至少，它可以满足您的要求，但缺少数据）。为了正确显示您想要的内容，我建议您进行一些修改：

首先，我假设您在代码中的某处定义了变量 children，以使其正常工作

<div ng-repeat="group in children">

一旦完成，第二个指令就会被正确调用，然后它会加载 ng-includes。但是，在您提供的模板中，有很多不一致的地方。您使用了一个名为“data1”的变量，在任何地方都没有定义，您只有 3 个重复的“类别”是完全正常的。您为指令定义了一个隔离范围，因此只有属性中的变量可用

我做了一个例子，使用内联模板，看起来像这样

<div><h3>Category1</h3>
      <ul>
        <li><a>{{data1.data1}}</a></li>
        <li><a>{{data1.data2}}</a></li>
      </ul>
</div>

并且几乎没有修改您的代码，所有内容都会显示出来。我主要修改了两个指令中的链接函数，以设置丢失的数据：

组控制：

  link: function(scope, element, attrs) {
  scope.children=[
                {"data": "function4" }, 
                {"data": "function5" }, 
                {"data": "function6" }]
  }

部分控制：

link: function(scope, element, attrs) {
scope.getIncludeFile = function(section) {
    return section + ".html";
}
scope.data1={data1:"Hello", data2:"World !"};

如果您想查看http://jsfiddle.net/DotDotDot/zhZXK/4/

我认为您的问题只是与指令范围内的缺失数据有关

于 2013-07-30T12:39:41.980 回答