实现下拉列表（以编程方式打开下拉列表）

Posted 2023-02-22

【中文标题】实现下拉列表（以编程方式打开下拉列表）

【英文标题】：Materialize drop down (open dropdown programatically)

【发布时间】：2018-05-29 01:50:53

【问题描述】：

Materializecss 下拉菜单： 我在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>

【问题讨论】：

看看这个：krescruz.github.io/angular-materialize。你不应该像这样混合使用 jQuery 和 Angular。

@brian 这个解决方案对我不起作用

***.com/questions/14994391/… 正如之前的评论所说，这是完全错误的。您无需在控制器中进行 DOM 操作，您只需在视图中使用指令即可。如果现有指令没有做您想做的事，请解释原因或展示您如何尝试将其编写为指令（或提出问题/搜索）

【参考方案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

    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>

【讨论】：

如何编写指令的好例子，但为什么不使用 ng-style 或 ng-class？