Angularjsのボタンを使ってdivを展開する

Question

これは私の問題です：http://jsfiddle.net/2f6qscrp/311/ まもなく、私は拡張可能なdivがあり、新しいdivが明らかになりました。この種のイベントはすべてのdivになければなりません。だから、この部門の各セクションで私はそれを開くことができます（アコーデオンのような）。問題は、もし私がこのdivのボタンの1つをクリックすると（それらはそこにあるはずです）、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.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

あなたは、ボタンをクリックしたときに、divの開口部を避けるためにevent.stopPropagation();メソッドを使用して試すことができます。

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