Question

我有问题...... 我的Materialise下拉列表仅在重新加载主页后才起作用。我尝试了所有能找到的解决方案。什么都做不了。

这是我的代码：

＆＃13;

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

＆＃13;

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

＆＃13;

感谢您的帮助;）！

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

<强>＆GT; demo fiddle

AngularJS + Materialise下拉列表不起作用

1 个答案:

视图

AngularJS应用程序