AngularJS: Я явно не понимаю использование ng-init

Question

У меня есть чрезвычайно иерархическая структура JSON как переменная области в моем контроллере AngularJS. Я хочу объединить разные разделы этой переменной. Я думал об использовании ng-init, чтобы указать, где находится структура. Вот код:

my_app.js:

(function() { 
    var app = angular.module("my_app"); 
    app.controller("MyController", [ "$scope", function($scope) { 
    $scope.things = { 
     name: "a", 
     children: [ 
     { 
      name: "a.a", 
      children: [ 
      { name: "a.a.a" }, 
      { name: "a.a.b" } 
      ] 
     }, 
     { 
      name: "a.b", 
      children: [ 
      { name: "a.b.a" }, 
      { name: "a.b.b" } 
      ] 
     } 
     ] 
    } 
    }]); 
}); 

my_template.html:

<div ng-app="my_app" ng-controller="MyController"> 
    <ul> 
    <li ng-init="current_thing=things.children[0]" ng-repeat="thing in current_thing.children> 
     {{ thing.name }} 
    </li> 
    </ul> 
</div> 

Я бы ожидал, чтобы отобразить список:

• a.a.a
• a.a.b

Но это ничего не отображает.

Конечно, если я задаю цикл явно (ng-repeat="thing in things.children[0].children"), он работает нормально. Но этот небольшой фрагмент кода шаблона должен выполняться в разных точках моего приложения на разных уровнях «вещей».

(Просто, чтобы сделать жизнь сложной, я могу получить текущий уровень вещи, используя стандартный JavaScript или еще с помощью Django сообразительности.)

Любые идеи?

Answer 1

ng-init работает с более низким приоритетом (450), чем ng-repeat (1000). В результате при размещении на том же элементе ng-repeat скомпилирован первым, что означает, что свойство scope, созданное ng-init, не будет определено до тех пор, пока не будет выполнено ng-repeat.

В результате, если вы хотите использовать его таким образом, вам нужно будет поместить его на родительский элемент.

<div ng-app="my_app" ng-controller="MyController"> 
    <ul ng-init="current_thing=things.children[0]"> 
    <li ng-repeat="thing in current_thing.children> 
     {{ thing.name }} 
    </li> 
    </ul> 
</div>