Materialize drop down (open dropdown programatically)

Question

Materializecss dropdown: I am using drop-down from the materializecss framework in angularjs code. I want to open it programmatically using $('.dropdown-button').dropdown('open');

Can someone help me in making the below demo to work? Note: Make it work programmatically so don't use data-activates

var app = angular.module('myApp', []);
app.controller('MyController', ['$scope', function($scope) {
  $scope.title = 'Hello world';
  $(document).ready(function() {
    $('.dropdown-button').dropdown({
      inDuration: 300,
      outDuration: 225,
      constrainWidth: false,
      hover: true, // Activate on hover
      gutter: 0, // Spacing from edge
      belowOrigin: false, // Displays dropdown below the button
      alignment: 'left',
      stopPropagation: false // Stops event propagation
    });
  });

  $scope.openDropDown = function() {
    alert('opening drop-down');
    $('.dropdown-button').dropdown('open');
  };
}]);

<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/css/materialize.min.css">

<!-- Compiled and minified JavaScript -->
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/js/materialize.min.js"></script>


<div ng-controller='MyController' ng-app="myApp">
  <div>{{title}}</div>

  <!-- Dropdown Trigger -->
  <a class='dropdown-button btn' href='#' ng-click="openDropDown()">Drop Me!</a>

  <!-- 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>
    <li><a href="#!"><i class="material-icons">view_module</i>four</a></li>
    <li><a href="#!"><i class="material-icons">cloud</i>five</a></li>
  </ul>
</div>

Look at this: https://krescruz.github.io/angular-materialize/. You shouldn't be mixing jQuery and Angular like this. — Brian, Dec 14 '17 at 22:18
https://stackoverflow.com/questions/14994391/thinking-in-angularjs-if-i-have-a-jquery-background As previous comment said this is just completely wrong. You don't do DOM manipulation in controllers you only do it with directives in the view. If an existing directive doesn't do what you want explain why or show how you are trying to write this as a directive (or ask questions/search about that) — shaunhusain, Dec 14 '17 at 23:59

score 0 · Answer 1 · answered Dec 15 '17 at 01:17

Create a directive to modify the CSS:

app.directive("appOpen",function(){
  return function(scope,elem,attrs) {
    scope.$watch(attrs.appOpen,function(open) {
      console.log("appOpen ",open)
      elem.css("opacity", open ? 1:0);
      elem.css("display", open ? 'block':'none');
    })
  }
})

Usage

<ul id='dropdown1' class='dropdown-content' app-open="down1open">

Controller

  $scope.openDropDown = function() {
    if ($scope.down1open) {
      console.log("closing drop-down");
      $scope.down1open = false;
    } else {
      console.log('opening drop-down');
      $scope.down1open = true;
    }
    //$('.dropdown-button').dropdown('open');
  };

The DEMO

    var app = angular.module('myApp', []);
    app.controller('MyController', ['$scope', function($scope) {
      $scope.title = 'Hello world';
      $(document).ready(function() {
        $('.dropdown-button').dropdown({
          inDuration: 300,
          outDuration: 225,
          constrainWidth: false,
          hover: true, // Activate on hover
          gutter: 0, // Spacing from edge
          belowOrigin: false, // Displays dropdown below the button
          alignment: 'left',
          stopPropagation: false // Stops event propagation
        });
      });

      $scope.openDropDown = function() {
        if ($scope.down1open) {
          console.log("closing drop-down");
          $scope.down1open = false;
        } else {
          console.log('opening drop-down');
          $scope.down1open = true;
        }
        //$('.dropdown-button').dropdown('open');
      };
    }]);
    app.directive("appOpen",function(){
      return function(scope,elem,attrs) {
        scope.$watch(attrs.appOpen,function(open) {
          console.log("appOpen ",open)
          elem.css("opacity", open ? 1:0);
          elem.css("display", open ? 'block':'none');
        })
      }
    })

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/css/materialize.css">
    <script src="https://code.jquery.com/jquery-3.2.1.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/js/materialize.js"></script>
<div ng-controller='MyController' ng-app="myApp">
      <div>{{title}}</div>

      <!-- Dropdown Trigger -->
      <a class='dropdown-button btn' href='#' ng-click="openDropDown()">Drop Me!</a>
      <!-- Dropdown Structure -->
      <ul id='dropdown1' class='dropdown-content' app-open="down1open">
        <li><a href="#!">one</a></li>
        <li><a href="#!">two</a></li>
        <li class="divider"></li>
        <li><a href="#!">three</a></li>
        <li><a href="#!"><i class="material-icons">view_module</i>four</a></li>
        <li><a href="#!"><i class="material-icons">cloud</i>five</a></li>
      </ul>
    </div>

Good example of how to write a directive but why not use ng-style or ng-class? — shaunhusain, Dec 15 '17 at 01:27

Materialize drop down (open dropdown programatically)

1 Answers1

Usage

Controller

The DEMO