Параметр pass до 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);
    }
});

EDIT: Сначала я столкнулся с проблемой, что директива ng-repeat имеет больший приоритет, чем ng-if. Я попытался объединить их, что не удалось. ИМО странно, что ng-repeat доминирует над ng-if.

Ответы

Ответ 1

Передать параметр Angular ng-include

Вам это не нужно. все источники ng-include имеют один и тот же контроллер. Поэтому каждый вид видит одни и те же данные.

В чем разница между ng-init = "item = item.left" и ng-repeat = "item в item.left"

[1]

ng-init="item = item.left" означает - создание нового экземпляра с именем item, равным item.left. Другими словами, вы достигаете того же путем записи в контроллер:

$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

Основная часть здесь, которую вы создаете Node с id, завернутый тегом <scipt>, и используйте 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>

Ответ 2

Немного взломан, но я передаю переменные в ng-include с ng-повторением массива, содержащего объект JSON:

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

На странице включения вы можете получить доступ к своей переменной следующим образом:

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

Ответ 4

Я использую ng-include с ng-repeat массива, содержащего строку. Если вы хотите отправить многопользовательские данные, обратитесь к Junus Ergin.

См. мой фрагмент кода:

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