Question

好的，所以我一直试图解决这个问题。我之前有过这方面的帮助，当您点击并拖动扩展的optgroup下的选项时，我试图解决问题，它会折叠optgroup。我一直试图在控制器中运行jquery类事件以防止这种情况发生，不幸的是没有发生任何事情。我甚至尝试在点击检查父母/孩子的选项时调用一个函数，但我想我错过了一些东西。现在，这是目前工作的一部分：Plnkr

我想知道这是否是一个已知问题，如果有的话有更好的解决方法吗？这是我第一次使用stopPropagation，所以我很可能没有正确使用它。 stopPropagation适用于单独选择选项或按住ctrl / shift并选择。如果您单击并拖动传递标签或传递选项的底部，则它们不会折叠，但如果您单击并拖动选项则会折叠。

以下是我试图解释的GIF：

When drag pass an the options

When you drag to an option

HTML：

<head>
  <script data-require="angular.js@1.4.1" data-semver="1.4.1" src="https://code.angularjs.org/1.4.1/angular.js"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>

<body ng-controller="MainCtrl">


  <select multiple class="box">
    <optgroup ng-click="value.expanded = !value.expanded" ng-repeat="(key,value) in data" label="{{value.label}}">
      <option ng-click="$event.stopPropagation()" ng-if="value.expanded" ng-repeat="id in value.ids">{{id}}</option>
    </optgroup>
  </select>

</body>

</html>

其余的是在plnkr

Answer 1

这是一种愚蠢的行为，而optgroup是父元素，它是DOM中子元素的高度。因此，一旦您在拖动和停止拖动时移动光标，就会在ng-click元素上触发事件optgroup（因为光标在其上）。我已经通过添加软件开关来实现它，正如您在runnable plnkr中看到的那样。

视图

<select multiple class="box">
  <optgroup ng-click="clickOptGroup(key);" ng-repeat="(key,value) in data" label="{{value.label}}">
    <option ng-mousedown="mouseDown()" ng-mouseup="mouseUp()" ng-click="$event.stopPropagation();" ng-if="value.expanded" ng-repeat="id in value.ids">{{id}}</option>
  </optgroup>
</select>

AngularJS应用程序

var app = angular.module('test',[]);

app.controller('MainCtrl',function ($scope, $timeout) {

   var mouseDown = false;

    $scope.data = [{
        label: "My Label", ids: [ "one id", "another id" ], 
        expanded: true
    },{ 
        label: "My Other Label", ids: [ "one id", "another id" ], 
        expanded: false
    }];

    $scope.clickOptGroup = function (key) {
      console.log('in');
      if (!mouseDown) {
         $scope.data[key].expanded = ! $scope.data[key].expanded;
      }
    }

    $scope.mouseDown = function ($event) {
      console.log('mouseDown');
      mouseDown = true;
    }
    $scope.mouseUp = function ($event) {
      $timeout(function () {
         mouseDown = false;
      }, 50);
    }
});

ng-click

1 个答案:

视图

AngularJS应用程序