Иерархические директивы Angularjs не получают переменные области видимости

Question

Я создаю приложение AngularJS. Я использую три директивы для создания меню. Заголовки находятся внутри файла i18n, поэтому большинство атрибутов являются выражениями angularjs. Вот фрагмент структуры директив:

<navbar title="{{ LABELS.HOME }}" inverse="true">
  <mainmenu>
    <menu-item name="system" title="{{ LABELS.SYSTEM }}">
      <submenu name="users" title="{{ LABELS.USERS }}"></submenu>
    </menu-item>
  </mainmenu>
</navbar>

Проблема заключается в коде директивы. в controller функция (и даже на link функция), я пытаюсь получить title а также name атрибуты, но они всегда приходят как undefined ценности, хотя я делаю console.dir($scope) Я могу видеть свойства,

Вы можете проверить фрагмент кода здесь

Answer 1

Я собираюсь сделать дикий удар здесь, так как вы не предоставили никакого кода, но они используются в ng-repeat?

Если это так, то проблема заключается в том, что функция связывания фактически вызывается до того, как значения применяются к области. Это потому что ng-repeat только мешает выполнить ссылку один раз для всего цикла, затем дублирует узлы, каждый с правильным $scope применяется.

Причина, по которой вы можете видеть значения в консоли, заключается в том, что объект области обновляется после запуска функции связывания, но до того, как консоль отобразит свой вывод.

Это приводит к ситуации, когда у вас есть что-то вроде этого:

$scope == {};
link();
    console.log($scope); // stores reference to be rendered
$scope.foo = 'bar';
renderConsoleOutput();

Если вы не можете это исправить, используя стандартную привязку (например, $parent.LABELS.SYSTEM или что-то подобное), вы можете обернуть доступ к вашему объекту в метод и вместо этого связать метод:

// in menu-item directive:
$scope.getLabels = function() { return $scope.LABELS; }

// in menu-item template:
<menu-item title="{{ getLabels().SYSTEM }}">