Как передать данные между двумя компонентами в синтаксисе angularjs es6?

Question

Я хотел бы передать данные из компонента todos в компонент todo и отобразить все элементы в виде списка.Я загружаю данные из сервиса и помещаю их в todos.controller.В todos.component я использую bindings: {todos: '<'}.В представлении todos.html он предоставляет данные в виде todos = $ ctrl.todos.В todo.html он перебирает todos и хочет вернуть todo.name.Эффект: возвращает только 'Todo'.

todo.service.js

export class TodoService {
  constructor($http) {
  'ngInject';
   this.$http = $http;
 }
  getTodos() {
    return this.$http.get('/api/todos');
  }
}

todos.controller.js

class TodosController {
   constructor(TodoService) {
    'ngInject'
    this.TodoService = TodoService;
   }

    $onInit() {
      this.todos = null;
      this.TodoService.getTodos().then(response => 
        {
           this.todos = response.data;
           console.log(this.todos);
        });

    }
}

export default TodosController;

todo.component.js

import template from './todo.html';
import controller from './todo.controller';
import './todo.scss';

let todoComponent = {
  bindings: {
    todos: '<'
  },
  template,
  controller
};`

export default todoComponent;

todos.html

<h1>Todos</h1>
<ul>
    <todo todos="$ctrl.todos"></todo>
</ul>

todo.html

<div>
    <p ng-repeat='todo in $ctrl.todos track by $index'>Todo: 
     {{$ctrl.todo.name}}
    </p>
</div>

Answer 1

Изменить todo.html следующим образом:

<div>
    <p ng-repeat='todo in $ctrl.todos'>Todo: 
     ̶{̶{̶$̶c̶t̶r̶l̶.̶t̶o̶d̶o̶.̶n̶a̶m̶e̶}̶}̶
     {{todo.name}}
    </p>
</div>

Также с todos.html:

<h1>Todos</h1>
̶<̶u̶l̶>̶
    <todo todos="$ctrl.todos"></todo>
̶<̶/̶u̶l̶>̶

Единственное разрешенное содержимоеиз <ul> элементов - ноль или более <li> элементов.

Для получения дополнительной информации см.

• MDN HTML Reference - <ul> element