覆盖来自 bootstrap 的点击
overriding ng-click from bootstrap
假设我正在自定义一个 angularjs bootstrap 轮播并将其作为指令。我想自定义 ng-click 在每个 left/right 箭头上调用的当前函数,以便它在 bootstrap 中定义的原始函数之前调用自定义函数。我知道在 ng-click 中调用多个函数可以通过
ng-click = "customFunction();originalFunctionFromBootstrap()"
但是,在 angular 轮播中,左右箭头是在其 bootstrap 模板中定义的,我不想使用 $templatecache 修改模板。
有没有办法在我的控制器中添加新的 ng-click 而无需修改模板缓存?
编辑:
我目前可以使用的解决方法是使用
document.querySelector('.left.carousel-control').addEventListener('click', function(){...})
当然这不是 angular 的方法。另外,如果我使用 ng-touch 中的 ng-click,它也不会被调用。有没有办法修改ng-click?
如果您继承了指令的范围,您可以将库函数保存在一个变量中并用您的逻辑覆盖该函数。然后调用您保存在变量上的函数,以便一切正常。
var _superClickMethod = scope.originalFunctionFromBootstrap;
scope.originalFunctionFromBootstrap = function () {
// custom logic
_superClickMethod();
}
其他解决方案是将 carrusel bootstrap 插件包装在您的指令中。我推荐最后一个选项。
我最后做的是:
document.querySelector('.left.carousel-control').setAttribute('ng-click', 'customFunction()');
$compile(document.querySelector('.left.carousel-control'))(scope);
这解决了我的问题。
假设我正在自定义一个 angularjs bootstrap 轮播并将其作为指令。我想自定义 ng-click 在每个 left/right 箭头上调用的当前函数,以便它在 bootstrap 中定义的原始函数之前调用自定义函数。我知道在 ng-click 中调用多个函数可以通过
ng-click = "customFunction();originalFunctionFromBootstrap()"
但是,在 angular 轮播中,左右箭头是在其 bootstrap 模板中定义的,我不想使用 $templatecache 修改模板。 有没有办法在我的控制器中添加新的 ng-click 而无需修改模板缓存?
编辑: 我目前可以使用的解决方法是使用
document.querySelector('.left.carousel-control').addEventListener('click', function(){...})
当然这不是 angular 的方法。另外,如果我使用 ng-touch 中的 ng-click,它也不会被调用。有没有办法修改ng-click?
如果您继承了指令的范围,您可以将库函数保存在一个变量中并用您的逻辑覆盖该函数。然后调用您保存在变量上的函数,以便一切正常。
var _superClickMethod = scope.originalFunctionFromBootstrap;
scope.originalFunctionFromBootstrap = function () {
// custom logic
_superClickMethod();
}
其他解决方案是将 carrusel bootstrap 插件包装在您的指令中。我推荐最后一个选项。
我最后做的是:
document.querySelector('.left.carousel-control').setAttribute('ng-click', 'customFunction()');
$compile(document.querySelector('.left.carousel-control'))(scope);
这解决了我的问题。