javascript - 单击时防止在特定条件下打开 md-select 下拉菜单

Question

我有一个问题，我试图阻止 md-select 在特定条件下打开，而是显示一个警告对话框。

我可以通过以下方式禁用 md-select

ng-disabled="controller.unsavedChangesMade"

但我宁愿避免这种情况，而是允许用户在显示对话框的情况下单击下拉菜单，而不打开 md-select 项目列表。如果我删除 ng-disabled，则会显示对话框和项目下拉列表。

<md-input-container>
    <label>Select Item</label>
    <md-select ng-disabled="controller.unsavedChangesMade" ng-model = "selectedItem" ng-click="controller.handleItemChange(selectedItem.name, $event)" aria-label="Selected Item">
        <md-option ng-repeat = "(index,item) in controller.items" ng-value = "item"
                   ng-click = "controller.getItemByCategory(item.name)">
            {{item.name}}
        </md-option>
    </md-select>
</md-input-container>

我研究过使用

$event.stoppropagation() 

但我无法让它停止打开下拉列表。

我不确定这是否可行，但我们将不胜感激，

谢谢

Answer 1

您可以将 event.stoppropagation() 与 md-on-open 属性一起使用 - CodePen

<div ng-controller="AppCtrl as ctrl" class="md-padding selectdemoBasicUsage" ng-cloak="" ng-app="MyApp">
  <div>
    <div layout="row">
      <md-input-container>
        <label>State</label>
        <md-select ng-model="ctrl.userState" md-on-open="ctrl.test($event)">
            <md-option ng-repeat="state in ctrl.states" value="{{state.abbrev}}">
              {{state.abbrev}}
            </md-option>
          </md-select>
      </md-input-container>
    </div>
    <md-button ng-click="ctrl.toggle()">Toggle</md-button>
  </div>
</div>

JS

(function () {
  'use strict';
  angular
      .module('MyApp',['ngMaterial', 'ngMessages', 'material.svgAssetsCache'])
      .controller('AppCtrl', function() {
        this.unsavedChangesMade = false;

        this.toggle = function () {
          this.unsavedChangesMade = !this.unsavedChangesMade;
        };

        this.test = function (event) {
          if (this.unsavedChangesMade) {
            event.stoppropagation();            
          }
        };

        this.userState = '';
        this.states = ('AL AK AZ AR').split(' ').map(function (state) { return { abbrev: state }; });
      });
})();