Выпадающий список AngularJS + Materialize не работает

У меня проблема... Мой выпадающий список 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>

Спасибо за вашу помощь ;) !


dropdown angularjs materialize
person Jek    schedule 12.03.2018    source источник
comment
Вы вводили $timeout в свой контроллер? какие-либо ошибки?   -  person Joe Warner    schedule 12.03.2018
comment
Спасибо Джо! Да, $timeout вводится в мой контроллер   -  person Jek    schedule 12.03.2018
comment
Почему вы не используете angular-materialize?   -  person lin    schedule 12.03.2018
comment
Хм... Хороший вопрос. Но я вижу плохой переход на другой фреймворк. Если я не могу использовать оба. Что вы думаете об этом?   -  person Jek    schedule 12.03.2018
comment
Materialise — это не фреймворк, это библиотека. Вам следует использовать библиотеки, поддерживаемые AngularJS, если вы не хотите писать директиву для каждой привязки элемента, которая вам нужна.   -  person lin    schedule 12.03.2018
comment
Я собираюсь попытаться использовать угловой материал перед использованием директивы. Еще раз спасибо вам двоим!   -  person Jek    schedule 12.03.2018

Ответы (1)


arrow_upward
1
arrow_downward

Вы должны использовать директиву:

Вид

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

> демонстрационная скрипта

person lin    schedule 12.03.2018
comment
Спасибо лин! Я попробую это! - person Jek; 12.03.2018