由Drop.js

Question

我正在尝试使用Drop.js和Angular.js创建一个下拉菜单。当我尝试在Drop.js定义的ng-repeat元素中使用content指令时，ng-repeat元素由于某种原因被注释掉（参见下面的屏幕截图）。任何人都知道为什么会发生这种情况以及解决这个问题的好方法是什么？

我的DOM的屏幕截图：

我在控制台中也遇到错误：

  

TypeError：无法读取null

的属性“insertBefore”

这是我的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);

}]);