angularjs 지시어의 요소를 수정하고 템플릿에 다시 넣으십시오.

Question

지시어가 첨부 된 요소에 조건부 수정을 적용한 다음 새 템플릿에 넣어야합니다. 나는 그것을 "오버라이드"하고 싶지 않습니다.

아직 설명하지 못했습니다. 감사합니다. btw!

나는 translude를 사용할 수 있지만, 조건부로도 템플릿을 수정할 수 있기를 바랍니다.

HTML :

<directive-name></directive-name> 

JS :

.directive('directiveName', function($compile) { 
    return { 
    restrict: 'E', 
    link : { 
     pre: function(scope, iElement, iAttributes) { 
     if(condition) { 
      iElement.attr('a-attribute', "field") 
      break; 
     } 
     else { 
      iElement.attr('b-attribute', "field")      
      break; 
     } 
     var template = 
      '<pre>' + // Some very cool template here 
      iElement.html() + // Here it's where it doesn't work :(
      '</pre>'; 
     newElement = $compile(template)(scope); 
     iElement.replaceWith(newElement);  
     } 
    }, 
    } 
}) 

Answer 1

이 같은 것을보십시오 :

.directive('nsDirective', ['$compile', function($compile) { 
    return { 
     restrict: 'AE', 
     controller: 'nsDirectiveCtrl', 
     link: function(scope, element, attributes, controller) { 
      var build = function() { 
       var html = ''; 
       if (attributes.type === 'a') { 
        html = '<div ns-directive-a></div>'; 
       } 
       element.empty().append($compile(html)(scope)); 
      }; 
      // Init 
      build(); 
     } 
    }; 
}]) 

Answer 2

가 알았어요!

iElement [0] .outerHTML이 필요했습니다!

'<pre>' + // Some very cool template here 
    iElement[0].outerHTML 
'</pre>';