我有两个使用相同控制器的单独页面
我正在使用ui路由器状态在页面之间切换
它们包含以下指令,这些指令按顺序使用templateUrl作为模板:
第A页
directive_1
directive_2
第B页
directive_1
directive_3
directive_4
directive_2
每个指令都有一个数组$ scope.array,它与父作用域$ scope.array双向绑定,并且每个指令都将其指令编号添加到该数组中。
每个指令还控制台记录'Here:'+指令编号。
我设置了一个监视功能,在公共控制器上监视$ scope.array,并在内部更改时打印$ scope.array
现在,当我导航到A页时,我在控制台中看到了
这里:1
[1]
这里:2
[1,2]
当我离开然后翻页到A页时,我在控制台中看到了
这里:1
这里:2
[1,2]
所以手表功能只会触发一次。
然后奇怪的事情发生了,当我到达B页时,我在控制台中看到了
这里:1
这里:2
[1,2]
这里:3
[1,2,3]
这里:4
[1,2,3,4]
所以指令似乎没有按顺序加载!直观地说,最终的顺序是 1,3,4,2,就像指令在页面上的布局一样。
Angular是否在模板之间进行智能比较并得出结论已经加载了一些指令并在尝试新指令之前立即执行这些指令?
当我们第二次导航回到页面B时,事情正常加载。发生了什么事?
答案 0 :(得分:1)
我想我知道为什么会这样。
因为angular $ templateCache正在缓存,所以前两个指令在页面A加载后被缓存。
当我们转到页面B时,缓存的模板加载速度更快,因此1和2立即加载,3,4加载并放入$ templateCache。
下次当我们转到页面B时,所有内容都在$ templateCache中,并且它们会再次按顺序加载。
在制作中,我们首先将所有内容都放在模板缓存中,因此这不会成为问题。
否则,如果您关心指令的顺序,则非常棘手。