web-dev-qa-db-ja.com

ng-ng-includeで繰り返すが機能しない

_ng-repeat_を含む_ng-include_を使用しようとしています。問題は、ng-repeatの最初の要素が_ng-include_テンプレートであり、_ng-repeat_のデータが入力されていないことです。_ng-include_からテンプレートをバインドする方法はありますか？ SOMECODE）__なので、最初の_ng-repeat_で機能しますか？

_<div ng-repeat="item in items">
    <div ng-include src="'views/template.html'"></div>
</div>
_

たとえば、私の_ng-repeat_に10個のアイテムが含まれている場合、最初にレンダリングされるアイテムは空のテンプレートになります。アイテム2〜10は、本来あるべき形でレンダリングされます。私は何が間違っているのですか？

angularjsangularjs-ng-repeatangularjs-ng-include
9
Chris Paterson

まず、アイテムの最初のインデックスに含まれているデータに、必要なデータが実際に含まれていることを確認します。

問題に対する1つの可能な解決策は、単にng-repeatの最初のインデックスを表示しないことです。

<div ng-repeat="item in items" ng-show="!$first">
   <div ng-include src="'views/template.html'"></div>
</div>

これは実際には問題の根本に対処しないかもしれませんが、それでもアプリケーションが期待どおりに動作するようになる可能性があります。

別の可能な解決策：

<div ng-repeat="item in items" ng-include="'views/template.html'"></div>

ここの例を参照してください：

http://plnkr.co/edit/Yvd73HiFS8dXvpvpEeFu?p=preview

ちょうど良い測定のためのもう1つの可能な修正：

コンポーネントを使用する：

html：

<div ng-repeat="item in items">
   <my-include></my-include>
</div>

js：

angular.module("app").directive("myInclude", function() {
return {
    restrict: "E",
    templateUrl: "/views/template.html"
}
})
26
Jake Johnson

ディレクティブの使用は私のために働いた： https://stackoverflow.com/a/24673257/188926

あなたの場合：

1）ディレクティブを定義します。

angular.module('myApp')
  .directive('mytemplate', function() {
    return {
      templateUrl: 'views/template.html'
    };
  });

2）新しいディレクティブを使用します。

<mytemplate />

...または 懸念 HTML検証について：

<div mytemplate></div>
1
Dunc