javascript - Angularjs中带有按钮的可扩展div

Question

那是我的问题:http://jsfiddle.net/2f6qscrp/311/ 简而言之:我有一个可以扩展的 div，它显示了一个新的 div。这种事件必须在所有的div中。所以，在这个 div 的每个部分我都可以打开它(就像 Accordion 一样)。问题是，如果我单击此 div 上的按钮之一(它们必须在那里)，div 将打开。如果可能的话，我会避免这件事。是否可以？

<div ng-app='home'>
    <!-- App goes here -->
    <md-content md-scroll-y flex layout="column" class="_md ng-scope layout-column flex" layout-padding ng-controller="MainCtrl as mainCtrl">
         <div layout="column" md-scroll-y>
           <div layout="row" ng-click="showDetailsFunction();" class="div-outline-none div-cursor-pointer">
             <h3 flex class="div-card-panel-title">
               Blablablabla
             </h3>
             <span flex></span>
             <ul flex class="div-doc-act div-flex">
               <li>
                <md-button class="md-icon-button no-margin"
                   data-ng-click="doGreeting('btn1');">
                     btn1
                </md-button>
               </li>
               <li>
                <md-button class="md-icon-button no-margin"
                   data-ng-click="doGreeting('btn2');">
                     btn2
                </md-button>
               </li>
               <li>
                <md-button class="md-icon-button no-margin"
                   data-ng-click="doGreeting('btn3');">
                     btn3
                </md-button>
               </li>
             </ul>
           </div>
           <div data-ng-if="showDetails" class="animate-if">
              <div>
                wevniwernviurevnier
              </div>
           </div>
       </div>
    </md-content>
</div>

Angular 部分

angular.module('home', ['ngAria', 'ngAnimate', 'ngMaterial']);

angular.module('home').config(function ($mdThemingProvider) {
    $mdThemingProvider.theme('default')
        .primaryPalette('pink')
        .accentPalette('grey');
});

angular.module('home').controller('MainCtrl', function ($scope, $window) {
        $scope.showDetails = false;
    $scope.showDetailsFunction = function() {
      $scope.showDetails = !$scope.showDetails;
    };
    $scope.greeting = 'Hello, World!';
    $scope.doGreeting = function(greeting) {
        $window.alert($scope.greeting + " " + greeting);
    };
});

Answer 1

您可以尝试使用 event.stopPropagation(); 方法来避免在单击按钮时打开 div。

$scope.(your div name) = function($event) {
  $event.stopPropagation();
  // Some code to find and display the next image
}