ng-repeat被Drop.js註釋掉

Question

我在嘗試使用Drop.js和Angular.js作出下拉菜單。當我嘗試在由Drop.js定義的content元素內使用ng-repeat指令時，ng-repeat元素因某種原因而被註釋掉（請參見下面的截圖）。任何人都知道爲什麼會發生這種情況，解決這個問題的好方法是什麼？

截圖我的DOM的：

我也是在控制檯得到一個錯誤：

TypeError: Cannot read property 'insertBefore' of null

這裏是我的HTML代碼：

<div id="dropdownmenu"> 
    Dropdown Menu <i class="fa fa-caret-down"></i> 
</div> 

<div id="dropdownmenu-content"> 
    <div>Line 1 works fine.</div> 
    <div>Line 2 works fine too.</div> 
    <div>But lines in ng-repeat are not showing up!</div> 
    <div ng-repeat="l in ['line 1', 'line 2', 'line 3']"> 
      {{l}} 
    </div> 
</div> 

我的JavaScript代碼：

var drop = new Drop({ 
     target: document.querySelector('#dropdownmenu'), 
     content: document.querySelector('#dropdownmenu-content'), 
     position: 'bottom left', 
     openOn: 'click' 
    }); 

Here's a Plunker demo of my problem.

Answer 1

你最好綁定Drop模塊后角指令ng-repeat渲染了。

angular.module('select', []) 
    .controller('SelectController', ['$scope','$timeout', function($scope,$timeout) { 

     $timeout(function(){ 
     var drop = new Drop({ 
      target: document.querySelector('#dropdownmenu'), 
      content: document.querySelector('#dropdownmenu-content'), 
      position: 'bottom left', 
      openOn: 'click' 
     }); 
     },0); 

}]);