AngularJS: Показать больше и показать меньше функциональности с HTML ИЛИ с помощью ng-bind-html & $ sce.trustAsHtml ()

Question

У меня есть нг-повтор на div, которые показывают содержимое. Содержимое очищается с помощью $ sce.trustAsHtml (), следовательно, оно показывает ссылки. Я хочу реализовать функцию «Показать больше и показать меньше» для этих данных.

Я пытался использовать dd-status-text-collapse dd-status-text-collapse-max-length = "300" dd-status-text-collapse-text директивы. Вот мой HTML-код:

<p class="angular-new-line" dd-status-text-collapse dd-status-text-collapse-max-length="300" dd-status-text-collapse-text="{{ activity.status | CustomSanitize }}" ></p>

activity.status =

<p>A wiki is run using <a href="https://en.wikipedia.org/wiki/Wiki_software">wiki software</a>, otherwise known as a wiki engine. A wiki engine is a type of <a href="https://en.wikipedia.org/wiki/Content_management_system">content management system</a>, but it differs from most other such systems, including <a href="https://en.wikipedia.org/wiki/Blog_software">blog software</a>, in that the content is created without any defined owner or leader, and wikis have little inherent structure, allowing structure to emerge according to the needs of the users.<a href="https://en.wikipedia.org/wiki/Wiki#cite_note-Easy_Wiki_Hosting-2">[2]</a> There are dozens of different wiki engines in use, both standalone and part of other software, such as <a href="https://en.wikipedia.org/wiki/Bug_tracking_system">bug tracking systems</a>. Some wiki engines are <a href="https://en.wikipedia.org/wiki/Open-source_software">open source</a>, whereas others are <a href="https://en.wikipedia.org/wiki/Proprietary_software">proprietary</a>. Some permit control over different functions (levels of access); for example, editing rights may permit changing, adding, or removing material. Others may permit access without enforcing access control. Other rules may be imposed to organize content.</p>

Фильтр:

.filter('CustomSanitize', function CustomSanitize($sce){
    return function(inputText){
        return $sce.trustAsHtml(inputText);
    };
});


.directive('ddTextCollapse', ['$compile', function($compile) {
    return {
        restrict: 'A',
        scope: true,
        link: function(scope, element, attrs) {

            /* start collapsed */
            scope.collapsed = false;

            /* create the function to toggle the collapse */
            scope.toggle = function(element) {
                scope.collapsed = !scope.collapsed;
                element.preventDefault();
            };

            /* wait for changes on the text */
              attrs.$observe('ddTextCollapseText', function(text) {

                /* get the length from the attributes */
                var maxLength = scope.$eval(attrs.ddTextCollapseMaxLength);

                if (text.length > maxLength) {
                    /* split the text in two parts, the first always showing */

                    var firstPart =''; 
                    var first_Part =  String(text).split(/ |,/).splice(0,30).join(" ");
                    var tagindex =  first_Part.endsWith(' <a');///<a/.exec(firstPart);

                    if(tagindex==true)
                    { 
                       firstPart =  String(text).split(/ |,/).splice(0,29).join(" ");
                    }
                    else
                    { 
                       firstPart =  String(text).split(/ |,/).splice(0,30).join(" ");
                    }

                    //var firstPart =  String(text).split(/ |,<a/).splice(0,13).join(" ");

                    var firstSpan = $compile('<span>' + firstPart + '</span>')(scope);
                    var secondPart = String(text).substring(firstPart.length, text.length);
                    /* create some new html elements to hold the separate info */
                    var secondSpan = $compile('<span ng-if="collapsed">' + secondPart + '</span>')(scope);
                    var moreIndicatorSpan = $compile('<span ng-if="!collapsed">... </span>')(scope);
                    var lineBreak = $compile('<br ng-if="collapsed">')(scope);
                    var toggleButton = $compile('<a href="javascript:void(0);" class="collapse-text-toggle" ng-click="toggle()">{{collapsed ? "Show less" : "Show more"}}</a>')(scope);

                    /* remove the current contents of the element
                     and add the new ones we created */
                    element.empty();
                    element.append(firstSpan);
                    element.append(secondSpan);
                    element.append(moreIndicatorSpan);
                    element.append(lineBreak);
                    element.append(toggleButton);
                }
                else {
                    element.empty();
                    element.append(text);
                }
            });
        }
    };
}]);

.directive('ddStatusTextCollapse', ['$compile', function($compile) {
    return {
        restrict: 'A',
        scope: true,
        link: function(scope, element, attrs) {

            /* start collapsed */
            scope.collapsed = false;

            /* create the function to toggle the collapse */
            scope.toggle = function(element) {
                scope.collapsed = !scope.collapsed;
                element.preventDefault();
            };

            /* wait for changes on the text */
              attrs.$observe('ddStatusTextCollapseText', function(text) {

                /* get the length from the attributes */
                var maxLength = scope.$eval(attrs.ddStatusTextCollapseMaxLength);

                if (text.length > maxLength) {
                    /* split the text in two parts, the first always showing */

                    var firstPart =''; 
                    var first_Part =  String(text).split(/ |,/).splice(0,250).join(" ");
                    console.log("ddStatusTextCollapse first_Part -->", first_Part);
                    var tagindex =  first_Part.endsWith(' <a');///<a/.exec(firstPart);

                    if(tagindex==true)
                    { 
                       firstPart =  String(text).split(/ |,/).splice(0,249).join(" ");
                    }
                    else
                    { 
                       firstPart =  String(text).split(/ |,/).splice(0,250).join(" ");
                    }

                    //var firstPart =  String(text).split(/ |,<a/).splice(0,13).join(" ");

                    var firstSpan = $compile('<span>' + firstPart + '</span>')(scope);
                    var secondPart = String(text).substring(firstPart.length, text.length);
                    /* create some new html elements to hold the separate info */
                    var secondSpan = $compile('<span ng-if="collapsed">' + secondPart + '</span>')(scope);
                    var moreIndicatorSpan = $compile('<span ng-if="!collapsed">... </span>')(scope);
                    var lineBreak = $compile('<br ng-if="collapsed">')(scope);
                    var toggleButton = $compile('<a href="javascript:void(0);" class="collapse-text-toggle" ng-click="toggle()">{{collapsed ? "Show less" : "Show more"}}</a>')(scope);

                    /* remove the current contents of the element
                     and add the new ones we created */
                    element.empty();
                    element.append(firstSpan);
                    element.append(secondSpan);
                    element.append(moreIndicatorSpan);
                    element.append(lineBreak);
                    element.append(toggleButton);
                }
                else {
                    element.empty();
                    element.append(text);
                }
            });
        }
    };
}]);

Я хочу показать "Показать больше" & "показатьменьше "переключаться. Первоначально, если данные больше 300 символов, тогда показывается кнопка «Показать больше» только с первыми 300 символами, и при нажатии на нее должны отображаться все данные с помощью кнопки «Показать меньше». Входная строка:

<p>A wiki is run using <a href="https://en.wikipedia.org/wiki/Wiki_software">wiki software</a>, otherwise known as a wiki engine. A wiki engine is a type of <a href="https://en.wikipedia.org/wiki/Content_management_system">content management system</a>, but it differs from most other such systems, including <a href="https://en.wikipedia.org/wiki/Blog_software">blog software</a>, in that the content is created without any defined owner or leader, and wikis have little inherent structure, allowing structure to emerge according to the needs of the users.<a href="https://en.wikipedia.org/wiki/Wiki#cite_note-Easy_Wiki_Hosting-2">[2]</a> There are dozens of different wiki engines in use, both standalone and part of other software, such as <a href="https://en.wikipedia.org/wiki/Bug_tracking_system">bug tracking systems</a>. Some wiki engines are <a href="https://en.wikipedia.org/wiki/Open-source_software">open source</a>, whereas others are <a href="https://en.wikipedia.org/wiki/Proprietary_software">proprietary</a>. Some permit control over different functions (levels of access); for example, editing rights may permit changing, adding, or removing material. Others may permit access without enforcing access control. Other rules may be imposed to organize content.</p>