Перерисовать шаблон AngularJS - PullRequest
Новая
       13

Перерисовать шаблон AngularJS

0 голосов
/ 10 июля 2019

Я бы ожидал, что на такие вопросы ответят миллион раз, но не могу найти ничего, что сработало бы для моей конкретной проблемы. Мой компонент выглядит так: 

const todoApp = () => ({
  template: `
    <div>
      <todo-list todos="todoApp._filteredTodos"></todo-list>
    </div>
  `,
  controller: class {
    constructor(todoService) {
      [...]
    }

    updateState() {
      this._activeTodos = _.filter(this._todos, t => !t.completed);

      switch (this.selectedFilter) {
        case 'active':
          this._filteredTodos = _.filter(this._todos, t => !t.completed);
          break;
        case 'completed':
          this._filteredTodos = _.filter(this._todos, t => t.completed);
          break;
        default:
          this._filteredTodos = this._todos;
      }
    },

    updateTodos() {
      this._todos = this.todoService.fetch();
      this.updateState();
    }

    [...]
  },
  restrict: 'E',
  bindToController: true,
  controllerAs: 'todoApp',
  link: function(scope, elem, attr, ctrl) {
    document.addEventListener('store-update', ctrl.updateTodos.bind(ctrl), false);
  }
});

export default todoApp;

Мне нужно обновить todoApp._todos, чтобы <todo-list> обновлялся с новым набором предметов. Этого не происходит, атм.

Компонент <todo-list> довольно прост: 

const todoList = () => ({
  scope: {
    todos: '=',
  },
  template: `
    <ul class="todo-list">
      <li ng-repeat="todo in todoList.todos track by todo.id">
        [...]
      </li>
    </ul>
  `,
  controller: class {
    [...]
  },
  restrict: 'E',
  bindToController: true,
  controllerAs: 'todoList'
});

export default todoList;

Что мне здесь не хватает?

1 Ответ

1 голос
/ 10 июля 2019

ERRONEOUS 

link: function(scope, elem, attr, ctrl) {
    document.addEventListener('store-update', ctrl.updateTodos.bind(ctrl), false);
}

AngularJS изменяет обычный поток JavaScript, предоставляя собственный цикл обработки событий.Это разбивает JavaScript на классический и AngularJS контекст выполнения.Только операции, которые применяются в контексте выполнения AngularJS, выиграют от привязки данных AngularJS, обработки исключений, наблюдения за свойствами и т. Д.

Вы также можете использовать $apply() для входа в выполнение AngularJSконтекст из JavaScript.Имейте в виду, что в большинстве мест (контроллеры, сервисы) $apply уже был вызван для вас директивой, которая обрабатывает событие. Явный вызов $ apply требуется только при реализации пользовательских обратных вызовов или при работе со сторонними обратными вызовами библиотеки. 

link: function(scope, elem, attr, ctrl) {
    document.addEventListener('store-update',storeUpdateHandler, false);
    scope.$on("$destroy", function() {
        document.removeEventListener('store-update',storeUpdateHandler);
    });

    function storeUpdateHandler() {
        scope.$apply(ctrl.updateTodos.bind(ctrl));
    }
}

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

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

...