반응형
AngularJS 지시문을 stopPropagation에 어떻게 만들 수 있습니까?
Li 내부의 요소 (링크)를 클릭 할 때 Twitter Bootstrap navbar 드롭 다운이 닫히지 않도록 "stopPropagation"을 시도하고 있습니다. 이 방법을 사용하는 것이 일반적인 해결책 인 것 같습니다 .
Angular에서 지시어가 이것을 수행하는 장소 인 것 같습니까? 그래서 나는 가지고있다:
// do not close dropdown on click
directives.directive('stopPropagation', function () {
return {
link:function (elm) {
$(elm).click(function (event) {
event.stopPropagation();
});
}
};
});
...하지만 메소드는 요소에 속하지 않습니다.
TypeError: Object [object Object] has no method 'stopPropagation'
나는 지침을
<li ng-repeat="foo in bar">
<div>
{{foo.text}}<a stop-propagation ng-click="doThing($index)">clickme</a>
</div>
</li>
어떤 제안?
이 방법으로 사용했습니다 : 지시문을 만들었습니다.
.directive('stopEvent', function () {
return {
restrict: 'A',
link: function (scope, element, attr) {
if(attr && attr.stopEvent)
element.bind(attr.stopEvent, function (e) {
e.stopPropagation();
});
}
};
});
다음과 같이 사용할 수 있습니다.
<a ng-click='expression' stop-event='click'>
이것은 모든 종류의 이벤트 전파를 중지하는보다 일반적인 방법입니다.
"현재 일부 지시문 (예 : ng : click)은 이벤트 전파를 중지합니다. 이는 이러한 이벤트 캡처에 의존하는 다른 프레임 워크와의 상호 운용성을 방지합니다." - 링크
... 지시문없이 간단히 수정할 수있었습니다.
<a ng-click="doThing($index); $event.stopPropagation();">x</a>
stopPropagation
요소 자체가 아닌 이벤트 객체에서 호출되어야합니다. 예를 들면 다음과 같습니다.
compile: function (elm) {
return function (scope, elm, attrs) {
$(elm).click(function (event) {
event.stopPropagation();
});
};
}
다음은 이벤트 전파를 중지하기위한 간단하고 추상적 인 지시문입니다. 누군가에게 유용 할 것이라고 생각합니다. 중지하려는 이벤트를 통과하기 만하면됩니다.
<div stopProp="click"></div>
app.directive('stopProp', function () {
return function (scope, elm, attrs) {
elm.on(attrs.stopProp, function (event) {
event.stopPropagation();
});
};
});
반응형
'Development Tip' 카테고리의 다른 글
Rails가 현재 설치되어 있지 않다고 계속 알려줍니다. (0) | 2020.10.17 |
---|---|
while 루프를 사용하지 않고 가장 안쪽의 예외를 찾으십니까? (0) | 2020.10.17 |
라이브러리가로드되지 않음 : /usr/local/opt/readline/lib/libreadline.6.dylib(LoadError) (0) | 2020.10.17 |
임의의 문자열과 임의의 16 진수를 만드는 가장 간단한 방법 (0) | 2020.10.17 |
파이썬에서 날짜에서 한 달을 빼는 가장 간단한 방법은 무엇입니까? (0) | 2020.10.17 |