Question

我希望这样的问题可以回答一百万次，但是找不到适合我的特定问题的任何东西。我的组件看起来像这样：

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>使用新的项目集进行更新。这不会发生在atm。

<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;

我在这里想念什么？

Answer 1

错误

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

AngularJS通过提供自己的事件处理循环来修改常规JavaScript流。这将JavaScript分为经典和AngularJS执行上下文。只有在AngularJS执行上下文中应用的操作才能受益于AngularJS数据绑定，异常处理，属性监视等。

您还可以使用$apply()从JavaScript输入AngularJS执行上下文。请记住，在大多数地方（控制器，服务）$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)); } }

为避免内存泄漏，在破坏指令范围时，代码应删除事件侦听器。

有关更多信息，请参见

AngularJS Developer Guide - Integration with the browser event loop

重新渲染AngularJS模板

1 个答案: