uibアコーディオンヘッダータグを動的に追加する

Question

以下のHTMlでは、mtaa-document-factsディレクティブで動的にuibヘッダー属性を追加したいとします。出来ますか？ 私はディレクティブを作成しようとしたが、それは私にエラー私はそれがアコーディオンを制御するのを助けるために、タグ以下<uib-accordion-heading>と<div class="mtaa-document-title">後を挿入したいlibs.min.js:117 TypeError: n is not a function

を与えています。 HTML

<uib-accordion close-others="oneAtATime"> 
        <uib-accordion-group is-open="status.open" class="mtaa-documents-facts" mtaa-document-facts> 

          <!--document list component--> 
          <div class="mtaa-document-list-component"> 
            <!-- <uib-accordion-heading> --> 

              <div class="mtaa-document-title"> 
               <h5 class="mtaa-document-title-text">Documents and Forms</h5> 
               <span class="mtaa-arrow-expand visible-xs visible-sm hidden-md hidden-lg"><i class="glyphicon" ng-class="{'glyphicon-chevron-down': status.open, 'glyphicon-chevron-right': !status.open}"></i> 
               </span> 
              </div> 

            <!-- </uib-accordion-heading>  --> 

              <div class="mtaa-document-link"> 
               <span class="icon-forms mtaa-document-link-icon"></span> 
               <a href="#"> Direct Debit form <span class="icon-longarrowright"></span></a> 
              </div> 
              <div class="mtaa-document-link"> 
               <span class="icon-forms mtaa-document-link-icon"></span> 
               <a href="#"> Direct Debit form <span class="icon-longarrowright"></span></a> 
              </div> 
              <div class="mtaa-document-link"> 
               <span class="icon-forms mtaa-document-link-icon"></span> 
               <a href="#"> Direct Debit form <span class="icon-longarrowright"></span></a> 
              </div> 
          </div> 

         <!--quick fact component--> 
          <div class="mtaa-quick-fact-container"> 
           <div class="mtaa-margin-top-small"></div> 
           <div class="mtaa-quick-fact-component mtaa-background-quick-fact" style="height:auto"> <!--From this part will go into sitecore--> 
            <div class="mtaa-quick-fact mtaa-quick-fact-primary"> 
             <a href="#"> 
              <div class="mtaa-quick-fact-title"> 
               <h2>80%</h2> 
              </div> 
              <div class="mtaa-quick-fact-description"> 
               This is link text with arrow icon <span class="mtaa-quick-fact-description-icon icon-longarrowright"></span> 
              </div> 
             </a><!-- This is link text with arrow icon --> 
            </div> 
           </div><!-- Ends--> 
          </div> 

        </uib-accordion-group> 
       </uib-accordion>  

Direcitve

(function() { 
    angular 
     .module("mtaa.main") 
     .directive("mtaaDocumentFacts",[ headerFactory ]); 

    function headerFactory($compile) { 
     let directive = { 

      restrict: "A", 
      compile: compile, 
      link: link 
     }; 

     function link(scope,ele) { 

     } 

     function compile(scope,tElem, tAttrs){ 

       console.log(': compile'); 

       return { 
        pre: function(scope, iElem, iAttrs){ 

        }, 
        post: function(scope, iElem, iAttrs){ 
         console.log('link:' + iElem[0].getElementsByClassName('mtaa-document-title')); 
         var html = iElem[0].getElementsByClassName('mtaa-document-title').innerHTML; 
         var finalHtml = '<uib-accordion-heading>' + html + '</uib-accordion-heading>'; 
         $compile(finalHtml)(scope); 
        } 
       } 
     } 

     return directive; 
    } 
})(); 

Answer 1

は、私はディレクティブでコンパイルサービスが含まれていなかったので、エラーがしたソリューションを得ました。 しかしここでは、単純に新しいDOMノードをコンパイル関数に追加していますが、これはデフォルトではコンパイル前のイベントです。ここで

ディレクティブ

/* 
    directive to append 
    dynamic uib header for accordion 
*/ 

(function() { 
    angular 
     .module("mtaa.main") 
     .directive("mtaaDocumentFacts",[ documentFactsFactory ]); 

    function documentFactsFactory() { 
     let directive = { 

      restrict: "A", 
      compile: compile 
     }; 


     function compile(scope,tElem, tAttrs){ 

       let arrowIcon = '<span class="mtaa-arrow-expand visible-xs visible-sm hidden-md hidden-lg"><i class="glyphicon" ng-class="{"glyphicon-chevron-down": '+status.open+', "glyphicon-chevron-right": '+!status.open+'}"></i>'; 
       // <span class="mtaa-arrow-expand visible-xs visible-sm hidden-md hidden-lg"><i class="glyphicon" ng-class="{'glyphicon-chevron-down': status.open, 'glyphicon-chevron-right': !status.open}"></i> 
       //   </span> 
       //need better navigation approach through jQlite 
       let titleHtml = angular.element(tElem['$$element'][0].children[0].children[0]).html() + arrowIcon; 
       let finalHtml = '<uib-accordion-heading><div class="mtaa-document-title">'+ titleHtml + '</div></uib-accordion-heading>'; 
       angular.element(tElem['$$element'][0].children[0].children[0]).empty().html(finalHtml) 


       //using jQuery 
        // let titleHtml = $(tElem['$$element']).find('.mtaa-document-title').html() + arrowIcon; 
        // let finalHtml = '<uib-accordion-heading><div class="mtaa-document-title">' + titleHtml + '</div></uib-accordion-heading>'; 
        // $(tElem['$$element']).find('.mtaa-document-title').html(finalHtml);  


       return { 
        pre: function(scope, iElem, iAttrs){ 
        } 
       } 
     } 

     return directive; 
    } 
})(); 

はまだ仕事にNG-class属性を取得するために苦労しているあなたができれば、任意の助けを提案してください。