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

Posted 2023-02-22

【中文标题】从angularjs初始化materializecss下拉列表时出错

【英文标题】：Error while initializing materializecss dropdown from angularjs

【发布时间】：2015-11-27 05:28:25

【问题描述】：

我正在从 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();

除下拉菜单外，其他所有元素都在初始化。由于最后一行，我收到以下错误，如果我删除该行，除了下拉菜单外一切正常。我是 Angular 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">

【问题讨论】：

遇到同样的问题，有什么解决办法吗？

【参考方案1】：

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

$超时（函数（） M.Dropdown.init(document.querySelectorAll('.dropdown-trigger')); , 0);

【讨论】：

我认为这并不能解决找不到属性的问题。它类似于var obj;，然后访问像obj.a 这样不存在的obj 的属性a，因为obj 未定义。

【参考方案2】：

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

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

【参考方案3】：

我遇到了类似的问题，直到我找到了一个可行的方法。

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

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>

您可以将其放置在顶部或底部。我仍然不确定为什么这个 hack 有效:)

【参考方案4】：

我通过在包含下拉菜单的 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>