我正在寻找一个指令,允许点击外部元素来克隆其中一个包含元素的ui-sref
,这样点击外部元素的行为与点击{{1}相同元素
.cloned
我尝试了触发点击的属性指令
<div clone-click=".cloned">
...
<a class="cloned" ui-sref="root.a" ng-if="true">example</a>
<a class="cloned" ui-sref="root.b" ng-if="false">example</a>
...
<a ui-sref="root.c">elsewhere</a>
...
</div>
但这会导致无限循环或某些东西而无法正常工作。我怎样才能使它工作?或者有更好的方法来实现这一目标吗?
答案 0 :(得分:1)
您没有考虑事件冒泡。就像现在一样,子节点上的任何点击事件都会冒泡到父节点,此时您要告诉它再次单击相同的元素...因此,如果单击您想要的目标,则无限循环
我的建议是阻止事件在<a>
传播。
如果单击<a>
本身,让浏览器处理重定向,如果单击任何其他父项,请使用$location
服务使用ui-sref
生成的href值重定向。 / p>
类似的东西:
link: function(scope, element) {
var $link = element.find(scope.selector).not(':disabled').first();
// prevent bubbling on target link
$link.click(function(e) {
e.stopImmediatePropagation()
});
element.click(function(e) {
// make sure target link wasn't element clicked
if (e.target !== $link[0]) { // assumes no child tags in `<a>`
$location.url($link.attr('href'));
}
});
}
根据您是否使用html5mode
,您可能需要调整一下编辑:写完之后,我发现你可以触发点击<a>
而不是使用$location
,因为事件传播(冒泡)仍然被阻止
答案 1 :(得分:0)
<ANY clone-click=".is-clone-click:not(:disabled):not(.is-disabled)">
<a class="is-clone-click" ui-sref="root.example">example</a>
</ANY>
I got it working like this。
通过使其容器成为e.target
,可以单击某些指针禁用的元素,因此我在这些容器上添加.is-no-clone-click
以忽略它们。
app.directive('cloneClick', function() {
var angular = require('angular');
var ignore = '[href], [ui-sref], [ng-click], .is-no-clone-click, label, input, textarea, button, select, option, optgroup';
return {
restrict: 'A',
scope: {
selector: '@cloneClick'
},
link: function (scope, element) {
element.click(function(e) {
if (e.isTrigger) {
return;
}
var cloned = element.find(scope.selector).first();
var target = angular.element(e.target);
if (cloned.length && !cloned.is(target) && !target.is(ignore)) {
cloned.click();
}
});
}
};
});
也可以通过鼠标悬停和CSS类添加光标,如
element.mouseover(function() {
element.toggleClass('is-pointer', !!element.has(scope.selector).length);
});
但我最终没有使用这个指令,因为我能够创建一个CSS link masking solution来实际解决我试图做的事情。