Angularjs는 다른 지시문을 실행하지 못하도록 지시문을 사용합니다.

Question

내 각형 앱의 일부 작업은 사용자가 등록해야합니다.사용자가 등록되지 않은 경우 "레지스터 모달"을 표시하고 원래 작업을 방지하려고합니다.

이러한 작업은 ng-click 또는 다른 "바인딩 클릭"지시문을 통해 트리거 될 수 있습니다 (예 : 'modal-toggle'1).

이 솔루션을 발견했습니다 : https://stackoverflow.com/a/16211108/2719044

이것은 꽤 멋지지만 ng-click에서만 작동합니다.

처음에는 지시문 동적의 "터미널"속성을 만들고 싶었지만 관리 할 수 없었습니다.

아이디어는 "터미널"을 true로 설정하고 수동으로 지시문에서 기본 클릭 동작을 방지하는 것이 었습니다.

여기 내 dom

<!-- This can work with terminal:true and scope.$eval(attrs.ngClick) (see example above) -->
<div user-needed ng-click="myAction()">Do it !</div> 

<!-- This doesn't work. I can't manage to prevent the modal-toggle to be executed -->
<div user-needed modal-toggle="my-modal-id-yey">Show yourself modal !</div> 

.

및 My Directive (S) (작동하지 않음 ...)

// First try (with terminal:true)
app.directive('userNeeded', function() {
    return {
        priority: -100,
        terminal: true,
        restrict: 'A',
        link: function(scope, element, attrs) {
            element.bind('click', function(e) {
                if(isRegistered()) {
                    // Here we do the action like scope.$eval or something
                }
            });
        }
    };
});

// Second try (with stopPropagation)
app.directive('userNeeded', function() {
    return {
        priority: -100
        restrict: 'A',
        link: function(scope, element, attrs) {
            element.bind('click', function(e) {
                if(!isRegistered()) {
                    e.stopPropagation();
                }
            });
        }
    };
});

.

... 그게 내가 여기있는 이유 야.어떤 아이디어가 있습니까?

감사합니다.

Answer 1

당신은 매우 가깝습니다.StopPropagation 대신 즉각적인 전파가 필요했습니다.이 둘 사이의 차이점은 이 stackoverflow 답변 @dave :

stopPropagation는 부모 핸들러가 존재하지 않는 것을 방지합니다. stopImmediatePropagation가 동일한 을 수행하는 동안 실행됩니다. 또한 다른 핸들러가 실행되지 않도록하십시오.

코드를 수정하려면 해당 메소드와 voilà :

를 교환해야합니다.

app.directive('userNeeded', function() {
    return {
        priority: -100
        restrict: 'A',
        link: function(scope, element, attrs) {
            element.bind('click', function(e) {
                if(!isRegistered()) {
                    e.stopImmediatePropagation();
                }
            });
        }
    };
});

.

여기에 예제 코드의 예제 예제 코드입니다.이 예에서 값을 Per user-needed="submit" 함수에 직접 전달하여 특정 이벤트 (예 : element.bind)를 지정할 수 있도록 지시문을 약간 수정했습니다.그러나 기본값은 '클릭'합니다.