Question

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

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

Answer 1

得到解决方案错误是因为我没有在指令中包含编译服务。但是这里的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标头标签

1 个答案: