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

3回繰り返されることを願っていますが
、結果は「Category1」を3回表示するだけで、とても混乱しています。助けてください

4

1 に答える 1

0

提示したコードは機能します (少なくとも、要求したことは実行しますが、データが欠落しています)。必要なものを正しく表示するために、いくつかの変更をお勧めします。

まず、これを機能させるために、コードのどこかに変数 children を定義したと仮定します

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

これが完了すると、2 番目のディレクティブが正しく呼び出され、ng-includes が読み込まれます。しかし、あなたが提供したテンプレートには、一貫性のないものがたくさんあります。どこにも定義されていない「data1」という変数を使用します。「Category」が 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 に答える