Question

我有一个元素，我使用$swipe。bind（来自ngTouch）on来连接控制器构造函数中的一些事件处理程序：

$swipe.bind($(element_selector), {'move': dragMoveHandler});

我将该元素移动到ngInclude中，但现在控制器构造函数在Angular处理ngInclude之前运行，因此$swipe.bind调用在执行时$(element_selector)为undefined时失败。

我研究过使用$includeContentLoaded检测ngInclude何时被处理，但是每次触发时都不清楚加载了哪个ngInclude，所以我的代码需要计算包含的数量在知道可以安全使用$swipe.bind之前已经加载，这似乎不是一个强大的解决方案。

我该怎么做？

Answer 1

为什么不在启动$ includeContentLoaded时检查元素是否存在

$rootScope.$on('$includeContentLoaded', function(event) {
   if($(element_selector).length){
       $swipe.bind($(element_selector), {'move': dragMoveHandler});
   }
});

或者如果你想避免注入$ rootScope并使用角度事件，为什么不用简单的vanilla JavaScript方式做到这一点

setTimeout(function check_if_element_exist(){
   if($(element_selector).length){
       $swipe.bind($(element_selector), {'move': dragMoveHandler});
   }
   else {
       setTimeout(check_if_element_exist, 0);
   }
}, 0);

您甚至可以将此逻辑移至装饰指令，以免违反SoC原则。

如何在ngInclude中的元素上使用$ swipe.bind（ngTouch）？

1 个答案: