ddCollapse不适用于多个元素 [英] ddCollapse not working for more than one elements

问题描述

我正在使用此指令来了解和隐藏大文本.但是问题是，如果我们在ng-repeat中有多个元素并且应用了此指令.当我单击更多链接时，使用此指令的所有元素都会扩展.我怎样才能只使一个div折叠并隐藏.??

I am using this directive to know and hide large text. But the problem is if we have more than one element in a ng-repeat and this directive is applied. When i click on more link all the elements with this directive gets expanded. HOw can i make only single div to collapse and hide.??

我尝试调试该指令，发现只有一个作用域变量，称为崩溃，当此变量切换时，变量值将应用到使用该指令的所有元素上.我该如何解决这个问题?

I tried debug the directive and found out that there is only a single scope variable named collapse and when this variable toggles the variable value is applied across all the elements with this directive. HOw can i solve this issue??

// a directive to auto-collapse long text
angular.module('myapp')
    .directive('ddCollapseText', ['$compile', function($compile) {
        return {
            restrict: 'A',
            replace: true,
            link: function(scope, element, attrs) {
                console.log(element);
                // start collapsed
                scope.collapsed = false;

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

                // get the value of the dd-collapse-text attribute
                attrs.$observe('ddCollapseText', function(maxLength) {
                    // get the contents of the element
                    var text = element.text();

                    if (text.length > maxLength) {
                        // split the text in two parts, the first always showing
                        var firstPart = String(text).substring(0, maxLength);
                        var secondPart = String(text).substring(maxLength, text.length);

                        // create some new html elements to hold the separate info
                        var firstSpan = $compile('<span>' + firstPart + '</span>')(scope);
                        var secondSpan = $compile('<span ng-if="collapsed">' + secondPart + '</span>')(scope);
                        var moreIndicatorSpan = $compile('<span ng-if="!collapsed"> ...</span>')(scope);
                        var toggleButton = $compile('<a href="javascript:void(0)" class="collapse-text-toggle" ng-click="toggle()"><i ng-if="!collapsed" class="fa fa-level-down"></i> <i ng-if="collapsed" class="fa fa-level-up"></i> {{collapsed ? "less" : "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(toggleButton);
                    }
                });
            }
        };
    }]);

推荐答案

实际上，我在指令中缺少 scope:true，.当我添加它时，它就固定了.

Actually i was missing scope : true, in the directive. When i added that it got fixed.

因此该指令将变为:

angular.module('myapp')
    .directive('ddCollapseText', ['$compile', function($compile) {
        return {
            restrict: 'A',
            scope : true,
            replace: true,
            link: function(scope, element, attrs) {
                //console.log(element);
                // start collapsed
                scope.collapsed = false;

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

                // get the value of the dd-collapse-text attribute
                attrs.$observe('ddCollapseText', function(maxLength) {
                    // get the contents of the element
                    var text = element.text();

                    if (text.length > maxLength) {
                        // split the text in two parts, the first always showing
                        var firstPart = String(text).substring(0, maxLength);
                        var secondPart = String(text).substring(maxLength, text.length);

                        // create some new html elements to hold the separate info
                        var firstSpan = $compile('<span>' + firstPart + '</span>')(scope);
                        var secondSpan = $compile('<span ng-if="collapsed">' + secondPart + '</span>')(scope);
                        var moreIndicatorSpan = $compile('<span ng-if="!collapsed"> ...</span>')(scope);
                        var toggleButton = $compile('<a href="javascript:void(0)" class="collapse-text-toggle" ng-click="toggle()"><i ng-if="!collapsed" class="fa fa-level-down"></i> <i ng-if="collapsed" class="fa fa-level-up"></i> {{collapsed ? "less" : "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(toggleButton);
                    }
                });
            }
        };
    }]);

更新: dd文本折叠

这篇关于ddCollapse不适用于多个元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！