web-dev-qa-db-fra.com

Passez le paramètre à Angular ng-include

J'essaie d'afficher un arbre binaire d'éléments, que je parcoure de manière récursive avec ng-include.

Quelle est la différence entre ng-init="item = item.left" et ng-repeat="item in item.left"? Dans cet exemple, il se comporte exactement de la même manière, mais j'utilise un code similaire dans un projet et, dans ce cas, il se comporte différemment. Je suppose que c’est à cause de Angular). Je ne devrais peut-être pas utiliser ng-if, expliquez-moi comment mieux le faire.

Le pane.html est:

<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>

Le contrôleur est:

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);
    }
});

EDIT: Tout d’abord, j’ai le problème que la directive ng-repeat a une priorité plus grande que ng-if. J'ai essayé de les combiner, ce qui a échoué. OMI, il est étrange que ng-repeat domine ng-if.

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

Passez le paramètre à Angular ng-include

Tu n'as pas besoin de ça. toutes les sources de ng-include ont le même contrôleur. Ainsi, chaque vue voit les mêmes données.

Quelle est la différence entre ng-init = "item = item.left" et ng-repeat = "item dans item.left"

[ 1 ]

ng-init="item = item.left" Signifie - créer une nouvelle instance nommée élément qui équivaut à item.left. En d'autres termes, vous obtenez le même résultat en écrivant dans le contrôleur:

$scope.item = $scope.item.left

[2]

ng-repeat="item in item.left" Signifie créer une liste d'étendues basées sur le tableau item.left. Vous devez savoir que chaque élément de ng-repeat A sa portée privée

J'essaie d'afficher un arbre binaire d'éléments, que je parcoure de manière récursive avec ng-include.

J'ai déjà posté dans la réponse précédente comment afficher un arbre en utilisant ng-include.

Cela pourrait être utile: how-do-display-a-collapsible-tree

La partie principale ici que vous créez Noeud avec id enveloppée par la balise <scipt> Et utilisez 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

C'est un peu hacky, mais je passe des variables à un ng-include avec un ng-repeat d'un tableau contenant un objet JSON:

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

Dans votre page d'inclusion, vous pouvez accéder à votre variable de la manière suivante:

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

Faire une directive générique au lieu de ng-include est une solution plus propre: portée angulaire de passage à ng-include

5
665

J'utilise ng-include avec ng-repeat d'un tableau contenant une chaîne. Si vous souhaitez envoyer plusieurs données, veuillez vous reporter à la rubrique Junus Ergin answer.

Voir mon extrait de code:

<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