Как сделать так, чтобы внутренние компоненты наследовали внешний $scope?

Question

[Максим Иванов]

app.js

// подключаем главный компонент формы регистрации-авторизации
import loginComponent from './angular/directives/loginContent.js';
app.component('loginContent', loginComponent);

// подключаем компонент навигации
import navComponent from './angular/directives/navContent.js';
app.component('navigation', navComponent);

// подключаем контроллер
import LoginController from './angular/controllers/LoginController.js';

index.html
<login-content></login-content>

login.html

<div ng-controller="LoginCtr">
    
    <navigation></navigation>
    {{ $text }}

</div>

navigation.html

<li ng-repeat="el in menu" >
 {{ el.title }}
</li>

LoginCtr.js

/**
 * Контроллер, обрабатывающий компонент формы входа и регистрации
 * @param {object} $rootScope - общая область видимости шаблонов для приложения 
 * @param {object} $http - ajax-объект для работы с http-запросами
 * @param {object} $compile - объект для добавления нового DOM и связывания с обработчиками
 * @param {object} $scope - локальная область видимости шаблонов относительно компонента контроллера
 * @param {object} dataService - сервис, обменивающийся данными между контроллерами
 */
export default ($rootScope, $http, $compile, $scope, dataService) => {
    
   $scope.text = "hello world"; // выводится в компоненты
   $scope.menu = [
         {title: 1},
         {title: 2}
   ];
}

Однако, компонент navigation хоть и подключается и его html виден в отладчике, но сами данные не выводятся

Как вложенным компонентам передавать данные контроллера верхнего уровня, чтобы они могли спокойно выводить то, что мне нужно?

Answer 1

[Сергей Протько]

передавайте данные явно через биндинги.

Comments

[Максим Иванов]

а как это делается?

[Максим Иванов]

если по правильному

[Сергей Протько]

Максим Иванов: https://docs.angularjs.org/guide/component - bindings

суть в том что компоненты не должны знать ничего что происходит во внешнем мире. Инкапсуляция и все такое. Так вы не сойдете с ума когда у вас приложения будут чуть посложнее.

Answer 2

[Владимир]

1) Данные, которые нужны компоненту передавайте в него явно.
2) Используйте controlleras
https://github.com/rwwagner90/angular-styleguide-es6