ui-router 中的 AngularJS 组件/范围问题

Posted 2023-02-22

【中文标题】ui-router 中的 AngularJS 组件/范围问题

【英文标题】：AngularJS component/scope issue in ui-router

【发布时间】：2019-07-16 08:34:08

【问题描述】：

更改状态后，我在使用 ui-router 和 angularjs 范围时遇到问题 - 新创建的范围使用旧控制器（反之亦然）。

我使用 AngularJS "angular": "1.5.8" 和 ui-router "@uirouter/angularjs": "^1.0.22"，用 ES6 风格编写的组件作为类。

组件示例：

import template from './my-container.html';

export const MyContainer = 
  bindings: 
  ,
  template: template,
  controller: class 
    constructor($scope) 
      'ngInject';
      this.$scope = $scope;
...

路线/州定义：

.state('mystate', 
    url: '/mystate',
    component: 'myPage' // in myPage <my-container>
)

问题： 在第一页加载一切正常。但是当我改变状态并返回时 - 任何更改都不会出现在模板中。

我提到 $scope.$id 已更改，但我的控制器仍使用以前的范围对象。

为了调试，我添加了两个控制台打印：在 onInit 和 myUpdateData 函数中。

在第一个屏幕截图中，我们可以看到正确的 id（初始化、更新函数、来自模板/dom 元素）：

在改变状态后（错误行为）：

future 调用 updateData - 它使用旧的（scr 上的 14）范围，但呈现新的范围。所以我们看不到模板有任何变化。

任何想法如何从这种情况中找出答案？

【参考方案1】：

解决了。

问题出在组件代码中 - 我忘记删除先前控制器实例上的所有引用，并且在更改状态后，此控制器在内存中保持活动状态（我不确定它是如何连接到新范围对象的，但它描述了解决方案）。

当你遇到这样的行为时 - 尝试留下几乎是空的组件，你会发现错误。