web-dev-qa-db-ja.com

パラメーターをAngular ng-includeに渡します

要素のバイナリツリーを表示しようとしていますが、ng-includeを使用して再帰的に処理します。

ng-init="item = item.left"とng-repeat="item in item.left"の違いは何ですか？この例では、まったく同じように動作しますが、プロジェクトで同様のコードを使用すると、動作が異なります。 Angularスコープのためだと思います。 ng-ifを使うべきではないかもしれませんが、もっと良い方法を説明してください。

Pane.htmlは次のとおりです。

<div ng-if="!isArray(item.left)">
    <div ng-repeat="item in [item.left]" ng-include="'Views/pane.html'">
    </div>
</div>
<div ng-if="isArray(item.left)">
    {{item.left[0]}}
</div>
<div ng-if="!isArray(item.right)">
    <div ng-repeat="item in [item.right]" ng-include="'Views/pane.html'">
    </div>
</div>
<div ng-if="isArray(item.right)">
    {{item.right[0]}}
</div>

<div ng-if="!isArray(item.left)">
    <div ng-init = "item = item.left" ng-include="'Views/pane.html'">
    </div>
</div>
<div ng-if="isArray(item.left)">
    {{item.left[0]}}
</div>
<div ng-if="!isArray(item.right)">
    <div ng-init="item = item.right" ng-include="'Views/pane.html'">
    </div>
</div>
<div ng-if="isArray(item.right)">
    {{item.right[0]}}
</div>

コントローラーは次のとおりです。

var app = angular.module('mycontrollers', []);

app.controller('MainCtrl', function ($scope) {

    $scope.tree = {
        left: {
            left: ["leftleft"],
            right: {
                left: ["leftrightleft"],
                right: ["leftrightright"]
            }
        },
        right: {
            left: ["rightleft"],
            right: ["rightright"]
        }
    };

    $scope.isArray = function (item) {
        return Array.isArray(item);
    }
});

編集：まず、ng-repeatディレクティブがng-ifよりも優先度が高いという問題に遭遇します。私はそれらを結合しようとしましたが、失敗しました。 IMO ng-repeatがng-ifを支配しているのは奇妙です。

javascriptangularjsangularjs-ng-repeatangularjs-ng-includeangularjs-ng-init
47
Johannes

Angular ng-includeにパラメーターを渡します

あなたはそれを必要としません。すべてのng-includeのソースには同じコントローラーがあります。したがって、各ビューには同じデータが表示されます。

Ng-init = "item = item.left"とng-repeat = "item.leftのアイテム"の違いは何ですか

[ 1 ]

ng-init="item = item.left"は-item.leftと等しいitemという名前の新しいインスタンスを作成することを意味します。言い換えると、コントローラーに書き込むことで同じことを実現できます。

$scope.item = $scope.item.left

[2]

ng-repeat="item in item.left"は、item.left配列に基づいてスコープのリストを作成することを意味します。 ng-repeatの各アイテムにはプライベートスコープがあることを知っておく必要があります

要素のバイナリツリーを表示しようとしていますが、ng-includeを使用して再帰的に処理します。

過去の回答で、ng-includeを使用してツリーを表示する方法を投稿しました。

役に立つかもしれません： how-do-display-a-collapsible-tree

ここで作成するメイン部分は、<scipt>タグでラップされたidを使用してNodeを作成し、ng-repeatを使用します。

  <script type="text/ng-template"  id="tree_item_renderer">
        <ul class="some" ng-show="data.show"> 
          <li ng-repeat="data in data.nodes" class="parent_li"  ng-include="'tree_item_renderer'" tree-node></li>
        </ul>
  </script>


<ul>
  <li ng-repeat="data in displayTree"  ng-include="'tree_item_renderer'"></li>
46
Maxim Shoustin

それは少しハックですが、JSONオブジェクトを含む配列のng-repeatで変数をng-includeに渡します：

<div ng-repeat="pass in [{'text':'hello'}]" ng-include="'includepage.html'"></div>

インクルードページで、次のように変数にアクセスできます。

<p>{{pass.text}}</p>
45
Junus Ergin

Ng-includeの代わりに汎用ディレクティブを作成すると、よりクリーンなソリューションになります。 ng-includeにスコープを渡す角度

5
665

文字列を含む配列のng-repeatとともにng-includeを使用しています。複数のデータを送信する場合は、 Junus Ergin answerを参照してください。

私のコードスニペットをご覧ください：

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="">
<div ng-repeat="name in ['Sanjib Pradhan']" ng-include="'your_template.html'"></div>
<div ng-repeat="name in ['Chinmay Sahu']" ng-include="'your_template.html'"></div>


    <script type="text/ng-template" id="your_template.html">
          {{name}}
    </script>
  </div>
2
Chinmay235