我们如何将一个类动态地传递给指令element.html（）

Question

我使用angular.js，当我点击另一个div时，我试图用一些动画显示div，我得到了解决方案，但我的代码中存在问题

这是我的Jsfiddle

这是我的HTML代码

<article ng-app="angularSlideables">

  <h1 slide-toggle="#derp" unique-name="add1">Click here for Hipster Ipsum.</h1>

  <div id="derp" slideable unique-content="add1">
    <p>Bespoke aesthetic Bushwick craft beer. Qui aesthetic butcher, cardigan ex scenester Neutra American Apparel mumblecore.</p>
    <p>Ethical adipisicing before they sold out, sriracha Thundercats cardigan dolor deep v placeat. Flannel tattooed meggings direct trade banh mi tousled sriracha. Portland VHS ut dreamcatcher. Butcher eu irony, Banksy leggings eiusmod Pinterest hashtag
      Etsy asymmetrical lo-fi Helvetica quis incididunt adipisicing. YOLO cliche minim mlkshk dreamcatcher excepteur, Austin McSweeney's.</p>
    <p>Coded @ Kinfolk Studios in Williamsburg, Brooklyn, 2013.</p>
  </div>
  <p>Your fresh artisinal Ipsum will appear above this paragraph. </p>


  <h1 slide-toggle="#derpadd2" unique-name="add2">Click here for Hipster Ipsum.</h1>

  <div id="derpadd2" slideable unique-content="add2">
    <p>Bespoke aesthetic Bushwick craft beer. Qui aesthetic butcher, cardigan ex scenester Neutra American Apparel mumblecore.</p>
    <p>Ethical adipisicing before they sold out, sriracha Thundercats cardigan dolor deep v placeat. Flannel tattooed meggings direct trade banh mi tousled sriracha. Portland VHS ut dreamcatcher. Butcher eu irony, Banksy leggings eiusmod Pinterest hashtag
      Etsy asymmetrical lo-fi Helvetica quis incididunt adipisicing. YOLO cliche minim mlkshk dreamcatcher excepteur, Austin McSweeney's.</p>
    <p>Coded @ Kinfolk Studios in Williamsburg, Brooklyn, 2013.</p>
  </div>
  <p>Your fresh artisinal Ipsum will appear above this paragraph. </p>

</article>

这是我的指令代码

angular.module('angularSlideables', [])
  .directive('slideable', function() {
    return {
      restrict: 'A',
      compile: function(element, attr) {
        // wrap tag
        var uniqueContent = attr.uniqueContent;
        console.log(uniqueContent);
        var contents = element.html();
        if (attr.uniqueContent === 'add1') {
          element.html('<div class="slideable_contentadd1" style="margin:0 !important; padding:0 !important" >' + contents + '</div>');
        } else if (attr.uniqueContent === 'add2') {
          element.html('<div class="slideable_contentadd2" style="margin:0 !important; padding:0 !important" >' + contents + '</div>');
        }

        /*
        element.html('<div class="slideable_content" style="margin:0 !important; padding:0 !important" >' + contents + '</div>');*/


        return function postLink(scope, element, attrs) {
          // default properties
          attrs.duration = (!attrs.duration) ? '1s' : attrs.duration;
          attrs.easing = (!attrs.easing) ? 'ease-in-out' : attrs.easing;
          element.css({
            'overflow': 'hidden',
            'height': '0px',
            'transitionProperty': 'height',
            'transitionDuration': attrs.duration,
            'transitionTimingFunction': attrs.easing
          });
        };
      }
    };
  })
  .directive('slideToggle', function() {
    return {
      restrict: 'A',
      link: function(scope, element, attrs) {
        var target = document.querySelector(attrs.slideToggle);
        attrs.expanded = false;
        element.bind('click', function() {

          var content = target.querySelector('.slideable_content' + attrs.uniqueName);
          if (!attrs.expanded) {
            content.style.border = '1px solid rgba(0,0,0,0)';
            var y = content.clientHeight;
            content.style.border = 0;
            target.style.height = y + 'px';
          } else {
            target.style.height = '0px';
          }
          attrs.expanded = !attrs.expanded;
        });
      }
    }
  });

以上代码工作正常，但在我的＆＃34;滑动＆＃34;指令我使用条件来使用elem.html（）中的类来触发两个不同的div，当我点击＆＃34; slide-toggle =＆＃39; #derp＆＃39;＆＃34;然后＆＃34; id =＆＃39; drep＆＃39;＆＃34;将打开，如果我点击＆＃34; slide-toggle =＆＃39;＃derpadd2＆＃39;＆＃34;然后＆＃34; id =＆＃39; derpadd2＆＃39;＆＃34;。我的问题是我不想使用if-condition因为如果我想用动画打开10个div意味着我必须对所有10使用if-condition，所以我想将动态类名称传递给element.html（）< / p>

先谢谢。