Question

我从angularjs模板动态加载materializecss下拉列表。因此，在加载主页面时开始初始化它不起作用。我添加了以下代码来初始化其他元素以及最后一行的下拉列表

//Inside angularjs controller
//Main Left Sidebar Menu
$('.sidebar-collapse').sideNav();

// FULL SCREEN MENU (Layout 02)
$('.menu-sidebar-collapse').sideNav();

// HORIZONTAL MENU (Layout 03)
$('.dropdown-menu').dropdown();

$('.button-collapse').sideNav();

$('.collapsible').collapsible();

$('.dropdown-button').dropdown();

除下拉列表外，其他所有元素都已初始化。由于最后一行我得到跟随错误，如果我删除该行一切正常，除了下拉列表。我是角度js以及前端开发的新手。我已经在网上搜索过，仍然无法找到任何答案。感谢你帮助我。

TypeError: Cannot read property 'childNodes' of undefined
at compositeLinkFn     (http://localhost/TempProject2/js/angular/angular.js:7641:36)
at compositeLinkFn (http://localhost/TempProject2/js/angular/angular.js:7641:13)
at compositeLinkFn (http://localhost/TempProject2/js/angular/angular.js:7641:13)
at compositeLinkFn (http://localhost/TempProject2/js/angular/angular.js:7641:13)
at compositeLinkFn (http://localhost/TempProject2/js/angular/angular.js:7641:13)
at compositeLinkFn (http://localhost/TempProject2/js/angular/angular.js:7641:13)
at compositeLinkFn (http://localhost/TempProject2/js/angular/angular.js:7641:13)
at compositeLinkFn (http://localhost/TempProject2/js/angular/angular.js:7641:13)
at compositeLinkFn (http://localhost/TempProject2/js/angular/angular.js:7641:13)
at nodeLinkFn (http://localhost/TempProject2/js/angular/angular.js:8241:24) <div ui-view="" class="ng-scope">

Answer 1

我通过将下拉内容包含在包含下拉列表的data-activates属性的锚标记中来实现它。看看下面的代码：

  <!-- Dropdown Trigger -->
  <li><a class="dropdown-button" href="#!" data-activates="dropdown1" id="test">Dropdown<i class="material-icons right">arrow_drop_down</i>
  <!-- Dropdown Structure -->
  <ul id="dropdown1" class="dropdown-content">
    <li><a href="#!">one</a></li>
    <li><a href="#!">two</a></li>
    <li class="divider"></li>
    <li><a href="#!">three</a></li>
  </ul>
  </a>
  </li>

Answer 2

我遇到了类似的问题，直到我发现了一个有效的黑客。

从控制器范围中删除下拉内容。

In SomeController
// add dropdown code
$('.dropdown-button').dropdown();


In your html, place the drop-down content outside the Controller scope
<section ng-controller="SomeController">
  <li><a class="dropdown-button" href="#!" data-activates="dropdown1" id="test">Dropdown<i class="material-icons right">arrow_drop_down</i>
</section>
<ul id="dropdown1" class="dropdown-content">
  <li><a href="#!">one</a></li>
  <li><a href="#!">two</a></li>
  <li class="divider"></li>
  <li><a href="#!">three</a></li>
</ul>

您可以将其放在顶部或底部。我仍然不确定为什么这个黑客有效：）

Answer 3

在您的控制器中，将下拉式初始化包装为超时。例如：

$ timeout（function（）{ M.Dropdown.init（document.querySelectorAll（'。dropdown-trigger'））; }，0）;

Answer 4

请在$('.dropdown-button').dropdown();函数中初始化document.ready。

它应该在文档准备好后运行。

从angularjs初始化materializecss下拉列表时出错

4 个答案: