ddCollapse不能用於多個元素

Question

我正在使用this directive來了解和隱藏大型文本。但問題是，如果我們在ng-repeat中有多個元素並應用此指令。當我點擊更多鏈接時，這個指令的所有元素都會被擴展。我可以讓唯一的單位崩潰和隱藏。

我試着調試指令，發現只有一個名爲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); 
        } 
       }); 
      } 
     }; 
    }]); 

Answer 1

其實我在指令中缺少scope : 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); 
        } 
       }); 
      } 
     }; 
    }]); 

UPDATE：dd-text-collapse