지시어 정의에 다른 지시어 안에 지시문을 추가하십시오.

Question

지시어를 서로 중첩 시키거나 다른 지시문의 정의 내에서 기존 지시문을 다시 사용하는 것이 좋습니다.

<a class="class1 class2" href="#link1" data-important="data1" my-directive>Test</a> 

하면 그것은 중요하지 않습니다 : 지금 사용자 정의 지시어 myDirective으로이 기존 마크 업에 새로운 기능을 추가 할

<a class="class1 class2" href="#link1" data-important="data1">Test</a> 

:

내가이 같은 기존의 HTML 마크 업을 말해봐 무엇 myDirective 않습니다,하지만 다시 ngClick 기능을 사용하고 싶습니다. 일반적으로 마크 업은 새 템플릿으로 대체되지만 모든 클래스, 속성 등을 미리 알지 못합니다. 내가 정말로 필요한 것은 에 ngClick을 붙이는 것이다. 나는 이런 식으로 뭔가를 시도했지만 작동하지 않았다 :

그래서

// inside myDirective 
compile: function (element, attrs) { 
    element.attr('ng-click', 'customFunction()'); 
} 

내가 지금이 방법을 수행

이

// inside myDirective 
link: function(scope, element, attrs, someCtrl) { 
    element.bind('click', function() { 
    someCtrl.customFunction(); 
    scope.$apply(); 
    }); 
} 

이하지만 scope.$apply();를 호출 할 필요가

• 작동
• 이 방법으로 ngClick을 에뮬레이트하는 것은 인 이지만 더 복잡한 지시문을 다시 사용할 수는 없습니다.

도움이 필요하십니까?

Answer 1

이 같은 전체 요소를 다시 컴파일해야합니다 : 각 요구 지시를 인식 컴파일 때문에 시도

directive('myDirective', ['$compile', function($compile){ 
    return{ 
     compile: function (element, attrs) { 
      return { 
       pre: function($scope, $element, $attrs){ 
        if(typeof $attrs.ngClick === "undefined"){ 
         $element.attr('ng-click', 'customFunction()'); 
         $compile($element)($scope); 
        } 
       } 
      }; 
     } 
    }; 
}]); 

Answer 2

첫 번째 방법은 작동하지 않습니다. 두 번째 방법으로 시도한 것은 매우 일상적이지만 수행중인 작업에 따라 scope.$apply()을 사용할 필요가 없습니다.

또한 ng-click의 속성을 설정하고 다시 컴파일하는 것은 약간 위험 할 수 있습니다. 사용자 지정어를 사용하는 누군가가 나중에 추가 할 ng-click을 무시할 수 있다는 것을 모르기 때문입니다. @ kamilkp의 대답은 그것을 막아 준다. 그러나 그 말은 customFunction도 발동하지 않는다는 것을 의미한다. 또한 요소와이 요소에 첨부 된 지시문을 두 번 컴파일하는 것을 의미합니다.

클릭 핸들러를 연결하기 만하면 customFunction 발사 외에도 해당 요소에서 클릭이 계속 작동합니다.