IT

Angular를 만드는 방법JS 명령으로 전파를 중지하시겠습니까?

itgroup 2023. 2. 22. 21:41
반응형

Angular를 만드는 방법JS 명령으로 전파를 중지하시겠습니까?

li 내의 요소(링크)를 클릭했을 때 Twitter Bootstrap navbar 드롭다운이 닫히지 않도록 "전파"를 중지하려고 합니다.이 방법을 사용하는 것이 일반적인 해결책인 것 같습니다.

앵귤러에서 이걸 하는 장소가 지시인 것 같나요?다음과 같은 일이 있습니다.

// 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 등)는 이벤트 전파를 중지합니다.를 통해 이러한 이벤트를 캡처해야 하는 다른 프레임워크와의 상호 운용성을 방지할 수 있습니다." - link

...지시 없이 다음 작업을 수행할 수 있었습니다.

<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();
    });
  };
});

언급URL : https://stackoverflow.com/questions/14544741/how-can-i-make-an-angularjs-directive-to-stoppropagation

반응형