動態生成的ID - 空目標

Question

EricWVGG對他的動畫指令的榮譽。

我正在使用下面的html和angularJS指令來執行幻燈片動畫。我無法將ngRepeat中的單個元素作爲目標。當我在所有索引中將div ID保留爲常量時，動畫就可以工作。當我將$ index附加到div ID時，Firebug中顯示'target is null'錯誤。

<div> 
    <div class="title" slide-toggle="#row_{{$index}}"> 
     <div style="float: left; width: 100%;"> 
     </div> 
    </div> 
    <div id="row_{{$index}}" class="slideable" duration=".5s"> 
    </div> 
</div> 


.directive('slideable', function() { 
return { 
    restrict:'C', 
    compile: function (element, attr) { 
     // wrap tag 
     var contents = element.html(); 
     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'); 
      if(!attrs.expanded) { 
       content.style.border = '1px solid rgba(0,0,0,0)'; 
       var y = content.clientHeight; 
       target.style.height = y + 'px'; 
      } else { 
       target.style.height = '0px'; 
      } 
      attrs.expanded = !attrs.expanded; 
      } 


     }); 
    } 
}; 
}) 

Answer 1

的$index只是ng-repeat指令，它實際上是在你的代碼所缺少內到達。

您還需要$timeout功能0值等待角完成更新DOM之前執行你的代碼，否則所有的IDS row_X其中X是$index的計算值將保持爲row_{{$index}}的div，你會不會能夠瞄準他們。 （here和here關於它的更多相關信息）

這裏是一個JSFiddle爲您的示例代碼。