AngularJS + Materialize 下拉菜单不起作用答案

【问题标题】：AngularJS + Materialize dropdown doesn't workAngularJS + Materialize 下拉菜单不起作用
【发布时间】：2018-03-12 13:34:02
【问题描述】：

我有问题... 我的 Materialize 下拉菜单仅在我的主页重新加载后才有效。我尝试了所有我能找到的解决方案。什么都做不了。

这是我的代码：

this.$postLink = () => {
      $timeout(() => {
        $('.dropdown-button').dropdown();
      }, 1000);
    };

<li ng-if="$ctrl.parent.isLogged()">
    <a class="dropdown-button" href data-activates="menu_user">
       {{'NAVBAR.HELLO' | translate}} {{$ctrl.parent.userName()}}
           <i class="material-icons right">arrow_drop_down</i>
    </a>
</li>

感谢您的帮助；）！

【问题讨论】：

您是否将 $timeout 注入到您的控制器中？有什么错误吗？
谢谢乔！是的，$timeout 被注入到我的控制器中
为什么不使用 angular-materialize？
嗯...好问题。但我认为迁移到另一个框架很糟糕。除非我可以同时使用两者。你怎么看？
Materialize 不是一个框架，它是一个库。如果您不想为所需的每个元素绑定编写指令，则应该使用 AngularJS 支持的库。

标签： angularjs materialize dropdown

【解决方案1】：

你必须使用directive:

查看

<div ng-controller="MyCtrl">

  <a class='dropdown-button btn' 
     href='#' 
     data-activates='dropdown1' 
     my-dropdown-button>Drop Me!</a>

  <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>
</div>

AngularJS 应用程序

var myApp = angular.module('myApp', []);

myApp.controller('MyCtrl', function() {});

myApp.directive('myDropdownButton', function() {
  return {
    restrict: 'A',
    link: function(scope, element) {
      element.dropdown({
        inDuration: 300,
        outDuration: 225,
        constrainWidth: false, // Does not change width of dropdown to that of the activator
        hover: true, // Activate on hover
        gutter: 0, // Spacing from edge
        belowOrigin: false, // Displays dropdown below the button
        alignment: 'left', // Displays dropdown with edge aligned to the left of button
        stopPropagation: false // Stops event propagation
      });
    }
  }
});

> demo fiddle

【讨论】：

谢谢林！我试试这个！