Angularjs ddCollapse不适用于多个图元

我习惯于知道和隐藏大文本。但问题是，如果ng repeat中有多个元素，并且应用了该指令。当我点击“更多链接”时，所有带有该指令的元素都会展开。我怎样才能使只有一个div折叠和隐藏

我尝试调试该指令，发现只有一个名为collapse的作用域变量，当该变量切换时，变量值将应用于该指令的所有元素。我如何解决这个问题

// 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);
                    }
                });
            }
        };
    }]);

//自动折叠长文本的指令
angular.module（'myapp'）
.directive（'ddCollapseText'，['$compile'，function（$compile）{
返回{
限制：“A”，
替换：正确，
链接：函数（范围、元素、属性）{
控制台日志（元素）；
//开始崩溃
scope.collapsed=false；
//创建用于切换折叠的函数
scope.toggle=函数（）{
scope.collapsed=！scope.collapsed；
};
//获取dd collapse文本属性的值
属性$observe（'ddCollapseText'，函数（maxLength）{
//获取元素的内容
var text=element.text（）；
如果（text.length>maxLength）{
//将文本分为两部分，第一部分始终显示
var firstPart=字符串（文本）。子字符串（0，maxLength）；
var secondPart=String（text）.substring（maxLength，text.length）；
//创建一些新的html元素来保存单独的信息
var firstSpan=$compile（“”+firstPart+“”）（范围）；
var secondSpan=$compile（“”+secondPart+“”）（范围）；
var moreIndicatorSpan=$compile（“…”）（范围）；
var-toggleButton=$compile（“”）（范围）；
//删除元素的当前内容
//并添加我们创建的新项目
元素。empty（）；
元素。追加（firstSpan）；
元素。追加（第二个span）；
元素。追加（moreIndicatorSpan）；
元素。追加（切换按钮）；
}
});
}
};
}]);

实际上，我在指令中缺少

范围：true，

。当我补充说它已经修好了

因此，该指令将变成：

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

angular.module（'myapp'）
.directive（'ddCollapseText'，['$compile'，function（$compile）{
返回{
限制：“A”，
范围：正确，
替换：正确，
链接：函数（范围、元素、属性）{
//控制台日志（元素）；
//开始崩溃
scope.collapsed=false；
//创建用于切换折叠的函数
scope.toggle=函数（）{
scope.collapsed=！scope.collapsed；
};
//获取dd collapse文本属性的值
属性$observe（'ddCollapseText'，函数（maxLength）{
//获取元素的内容
var text=element.text（）；
如果（text.length>maxLength）{
//将文本分为两部分，第一部分始终显示
var firstPart=字符串（文本）。子字符串（0，maxLength）；
var secondPart=String（text）.substring（maxLength，text.length）；
//创建一些新的html元素来保存单独的信息
var firstSpan=$compile（“”+firstPart+“”）（范围）；
var secondSpan=$compile（“”+secondPart+“”）（范围）；
var moreIndicatorSpan=$compile（“…”）（范围）；
var-toggleButton=$compile（“”）（范围）；
//删除元素的当前内容
//并添加我们创建的新项目
元素。empty（）；
元素。追加（firstSpan）；
元素。追加（第二个span）；
元素。追加（moreIndicatorSpan）；
元素。追加（切换按钮）；
}
});
}
};
}]);

---

更新：

我在我的个人网站上重复使用相同的指令，效果很好：