Параметр прохождения в Angular ng-include

Question

Я пытаюсь отобразить двоичное дерево элементов, которое я рекурсивно просматриваю с помощью ng-include.

В чем разница между ng-init="item = item.left" и ng-repeat="item in item.left"? В этом примере он ведет себя точно так же, но я использую аналогичный код в проекте и там он ведет себя по-другому. Полагаю, это из-за угловых областей. Может быть, я не должен использовать 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- если. Я попытался объединить их, что не удалось. ИМО странно, что ng-repeat доминирует над ng-if.

Answer 1

параметр Pass угловых нг-включает

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

В чем разница между нг-INIT = "п = item.left" и нг-повтор = "элемент в 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.

Это может помочь: how-do-display-a-collapsible-tree

Основная часть здесь, что вы создаете узел с 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> 

Answer 2

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

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

в вашей включают страницы вы можете получить доступ к переменной, как это:

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

Answer 3

Создание родовой директивы вместо нг-включать является экологически чистым решением: Angular passing scope to ng-include

http://tech.fongmun.com/post/131863914487/scoping-variables-in-ng-include-without-ng-repeat

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