Моя текущая ситуация: всплывающая подсказка кендо отлично работает в одиночку. моя новая пользовательская директива angularjs с kendoConfirm отлично работает в одиночку.
но как только я пытаюсь использовать их вместе на элементе, перестает работать только всплывающая подсказка кендо.
<button type = "button" title = "Disable Item" k-confirm-disable k-confirm-disable-title = "'Confirm Disable'" k-confirm-disable-msg = "'Are you sure you want to disable this item?'" ng-click = "disable(dataItem.id)" class = "btn btn-danger" kendo-tooltip k-content = "'Disable Item'" k-options = "kendoTooltipOptions">
$scope.kendoTooltipOptions = {
showAfter: 600, //time for tooltip appear
position : 'top',
width : 100
}
Подсказка кендо работает только тогда, когда я удаляю пользовательскую директиву angular из элемента.
function kConfirmDisable($compile){
return {
restrict: 'A',
scope: {
kConfirmDisableTitle: '@',
kConfirmDisableMsg: '@'
},
link: function(scope, element, attrs){
var clickHandlers = $._data(element[0]).events.click;
clickHandlers.reverse(); //reverse the click event handlers list
var onClick = function(evt) {
evt.preventDefault();
evt.stopImmediatePropagation();
if (!scope.kConfirmDisableTitle) {
scope.kConfirmDisableTitle = "Confirm";
}
if (!scope.kConfirmDisableMsg) {
scope.kConfirmDisableMsg = "Are you sure?";
}
angular.element("<div></div>").kendoConfirm({
title: scope.kConfirmDisableTitle.replace(/['"]+/g, ''),
content: scope.kConfirmDisableMsg.replace(/['"]+/g, ''),
buttonLayout: "normal",
visible: false,
actions: [
{
text: "No",
Primary: false,
action: function(){
evt.preventDefault();
evt.stopImmediatePropagation();
}
},
{
text: "Yes",
Primary: true,
action: function(){
element.unbind(this);
setTimeout(function() {
element.unbind("click", onClick);
element.click();
evt.preventDefault();
evt.stopImmediatePropagation();
element.on("click", onClick);
},0);
}
},
],
animation: {
open:{
effects: "zoom:in",
duration: 250
},
close:{
effects: "fade:out",
duration: 250
}
},
open: function(e) {
$("html, body").css("overflow", "hidden");
},
close: function() {
$("html, body").css("overflow", "visible");
}
}).data("kendoConfirm").open().result;
};
element.on("click", onClick);
clickHandlers.reverse();
}
}
}
Поскольку исходный код Kendo AngularJs недоступен, я могу предложить только пару вещей:
Попробуйте исследовать, что произойдет, если вы не остановите распространение и не остановите действие по умолчанию при щелчке в вашей директиве. Если сценарий таков, что он не срабатывает сразу при перезагрузке страницы и наведении на элемент без использования кликов — то это не актуально.
Избегайте использования изолированной области в вашей директиве и получайте атрибуты через параметр функции ссылки $attrs. Поскольку вы не указали, что получаете ошибку js, я предполагаю, что Kendo не использует изолированную область, но это все еще направление для изучения.
мое решение: я удалил «k-» из директивы «k-confirm-disable», и это сработало. Я думаю, это потому, что в кендо зарезервировано «k-».