动态添加uib accordion标头标签

问题描述：

在下面的HTMl中，我想通过指令mtaa-document-facts动态添加uib标头属性。可能吗？我试图创建的指令，但它给我一个错误libs.min.js:117 TypeError: n is not a function动态添加uib accordion标头标签

我想插入标签下方<uib-accordion-heading>和<div class="mtaa-document-title">后，以帮助它控制的手风琴。

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

答

得到了解决错误是因为我没有包含在指令编译服务。但是，这里是soln简单地在编译函数中添加新的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属性的工作，请你能提出任何帮助。

动态添加uib accordion标头标签

相关推荐