javascript - example - Pasar el parámetro a Angular ng-include

ng include ejemplo

Question

Estoy tratando de mostrar un árbol binario de elementos, que voy recursivamente con ng-include.

¿Cuál es la diferencia entre ng-init="item = item.left" y ng-repeat="item in item.left" ? En este ejemplo, se comporta exactamente igual, pero utilizo un código similar en un proyecto y allí se comporta de manera diferente. Supongo que es debido a los alcances angulares. Quizás no debería usar ng-si, por favor explícame cómo hacerlo mejor.

El pane.html es:

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

El controlador es:

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

EDITAR: Primero me encuentro con el problema de que la directiva ng-repeat tiene una prioridad mayor que ng-if. Traté de combinarlos, lo que falló. OMI es extraño que ng-repeat domine ng-if.

Answer 1

Pasar el parámetro a Angular ng-include

No necesitas eso. todas las fuentes de ng-include tienen el mismo controlador. Entonces cada vista ve los mismos datos.

Cuál es la diferencia entre ng-init = "item = item.left" y ng-repeat = "item in item.left"

[ 1 ]

ng-init="item = item.left" significa - crear una instancia nueva llamada elemento que es igual a item.left . En otras palabras, logras lo mismo escribiendo en el controlador:

$scope.item = $scope.item.left

[2]

ng-repeat="item in item.left" significa crear una lista de ámbitos basada en la matriz item.left . Debe saber que cada elemento en ng-repeat tiene su ámbito privado

Estoy tratando de mostrar un árbol binario de elementos, que voy recursivamente con ng-include.

Publiqué en la respuesta pasada cómo mostrar el árbol usando ng-include .

Podría ser útil: 1

La parte principal aquí es que creas Nodo con id envuelto por la etiqueta <scipt> y usas 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>

Answer 2

Es un poco raro, pero estoy pasando variables a ng-include con una repetición ng de una matriz que contiene un objeto JSON:

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

En su página de inclusión puede acceder a su variable de esta manera:

<p>{{pass.text}}</p>

Answer 3

Estoy usando ng-include con ng-repeat de una matriz que contiene una cadena. Si desea enviar datos múltiples, consulte la respuesta de Junus Ergin .

Ver mi código Snippet:

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

Answer 4

Hacer una directiva genérica en lugar de ng-include es una solución más limpia: Ámbito de aprobación angular para ng-include