物化下拉（以编程方式打开下拉列表）

Question

Materialisecss下拉列表： 我在angularjs代码中使用了materializecss框架的下拉列表。 我想使用$('.dropdown-button').dropdown('open');

以编程方式打开它

有人可以帮我制作下面的演示吗？ 注意：以编程方式运行，因此请勿使用数据激活

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>

Answer 1

创建一个修改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');
    })
  }
})

用法

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

控制器

  $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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;