javascript - 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

你最好在 angular 指令 ng-repeat 渲染结束后绑定(bind) Drop 模块。

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

}]);