http://embed.plnkr.co/SPGNLd0bcmo2Xt2TAZcB/preview
这里有一份人事信息卡清单。如果单击其中一个，则该指令会触发在该行与其前一行之间加载的模板。我的问题是它只能运行一次！
我相信我的问题存在于我的编译语句中，但我不确定：
$compile(controller.former)(scope);
老实说让我感到困惑的是，即使你只是一遍又一遍地点击同一张卡片，忽略所有其他卡片，它仍然会加载一次。第一次成功加载后，模板插入将变为空。也就是说，不是插入完整的模板，我只是得到：
<!-- ngInclude: 'focus.html' -->
而不是该文件中的实际模板。有没有人知道这里发生了什么？
我提前为相对复杂的指令道歉，如果有人有任何重构的建议，我是一本开放的书。
答案 0 :(得分：1)
我认为我描述的问题是从服务器端获取模板的异步方式。在缓存内容的情况下，它没有工作。你使用了元素绑定来点击反角度方式和非角度上下文（因此你需要调用$ apply）。在这种情况下，我想在处理编译节点本身的内容之前$ scope.apply工作的问题（因为你从缓存中立即获得模板）。如果从$ timeout函数调用$ scope.apply或（更好）通过ng-click将函数更改为与模板链接的范围函数，它将按预期工作。
答案 1 :(得分：0)
我认为目标是要实现你的设计看起来有点不对，看起来有点奇怪。无论如何，我可以向您展示问题 - 您正在使用在ng-include内编译的单独模板。 ng-include指令实际上使用模板缓存（默认行为）执行$ http请求，因此数据只加载一次并且未插入模板。如果您将随机种子添加到模板URL或在编译之前创建$ templateCache.remove（'focus.html'），这可以解决您的问题（但我不认为这是一个很好的解决方案，因为它每次都会进行http调用）。你绝对应该重新考虑你的代码，使它更干净。
答案 2 :(得分：0)
我改变了
controller.former = angular.element('<div ng-include="\'focus.html\'"></div>');
为：
controller.former = angular.element('<div><div ng-include="\'focus.html\'"></div></div>');
通过将模板包装到父容器中，我确保controller.former始终是对包含编译期间生成的所有元素的容器的引用。如果没有此修复，有时controller.former只会选择插入材料之前的注释节点。当我将该选择器传递到$animate.enter或$animate.leave,时，这解决会导致问题，因为它最终只会尝试为该单个注释节点设置动画并忽略它的下一个兄弟节点。