在重用指令的页面之间导航时指令未按顺序加载

Question

我有两个使用相同控制器的单独页面。
我正在使用 ui 路由器状态在页面之间进行更改。
它们包含以下指令，这些指令按顺序将 templateUrl 用于模板：
A页
指令_1
指令_2

B页
指令_1
指令_3
指令_4
指令_2

每个指令都有一个数组 $scope.array，它以两种方式绑定到其父作用域 $scope.array，每个指令都将其指令编号添加到该数组。

每个指令还控制台记录“此处：”+指令编号。

我已经设置了一个监视函数，它在通用控制器上监视 $scope.array 并在内部发生任何变化时打印出 $scope.array

现在，当我导航到页面 A 时，我在控制台中看到了
这里：1
[1]
这里：2
[1,2]

当我离开然后翻页到页面 A 时，我在控制台中看到
这里：1
这里：2
[1,2]

所以 watch 函数只会触发一次。

然后奇怪的事情发生了，当我到页面 B 时，我在控制台中看到了
这里：1
这里：2
[1,2]
这里：3
[1,2,3]
在这里：4
[1,2,3,4]

所以指令似乎没有按顺序加载！直观地说，最终的顺序是 1,3,4,2，就像指令在页面上的布局方式一样。

Angular 是否在模板之间进行智能比较并得出已经加载了一些指令并在尝试新指令之前立即执行这些指令的结论？

当我们第二次导航回页面 B 时，加载正常。怎么回事？

Answer 1

我想我知道这是为什么。
因为 angular $templateCache 正在缓存，所以前两个指令在页面 A 加载后被缓存。

当我们转到页面 B 时，缓存的模板加载速度更快，因此 1 和 2 立即加载，3、4 被加载并放入 $templateCache。

下次我们转到页面 B 时，所有内容都在 $templateCache 中，它们会再次按顺序加载。

在生产中，我们首先将所有内容都放在模板缓存中，所以这不是问题。
否则，如果您关心指令的顺序，则非常棘手。