Comment autoriser la propagation d'un événement dans AngularJS?

Question

Il semble que la valeur par défaut d'AngularJS empêche la propagation d'événements. Here is a test on jsfiddle.

Comme vous pouvez le voir sur le lien ci-dessus, le div couvrant les liens empêchent l'événement à propager le div en dessous, donc les liens ne fonctionnent pas lorsque vous cliquez dessus. Ceci est juste un cas de test, dans la situation réelle, le div a obtenu d'autres fonctions et doit être là, donc en supprimant le div n'est pas une option. Donc, comment faire pour que le clic de souris se propage aux liens sous div?

---

Le code au cas où vous ne voulez pas cliquer sur le lien ou le lien devient lien mort un jour dans un avenir lointain. (Et pour adapter les règles de débordement de pile)

HTML

<div class="container"> 
    <div class="unrelated"> 
    <a href="http://stackoverflow.com">Stack overflow 
    </a><a href="http://www.goole.com">Google</a> 
    </div> 
    <div class="scope" ng-app="myApp" ng-controller="testing"> 
    <div class="half-cover" ng-click="leftShow = false" ng-show="leftShow == true"> 
     Click to remove one 
    </div><div class="half-cover" ng-click="rightShow = false" ng-show="rightShow == true"> 
     Click to remove one 
    </div> 
    </div> 
</div> 

Javascript

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

myApp.controller('testing', ['$scope', MyCtrlFunction]); 
function MyCtrlFunction($scope) { 
    $scope.leftShow = true; 
    $scope.rightShow = true; 
} 

CSS

.container { 
    position: relative; 
    height: 300px; 
    width: 500px; 
    background-color: white; 
} 
.unrelated { 
    position: absolute; 
    width: 100%; 
    height: 100%; 
} 
.unrelated a{ 
    display: inline-block; 
    width: 50%; 
    height: 100%; 
    line-height: 300px; 
    text-align: center; 
} 
.scope { 
    position: absolute; 
    left: 0; 
    top: 0; 
    height: 100%; 
    width: 100%; 
    z-index: 1000; 
} 
.half-cover { 
    display: inline-block; 
    height: 100%; 
    width: 50%; 
    background-color: black; 
    color: white; 
    line-height: 300px; 
    text-align: center; 
} 

Answer 1

Je ne sais pas, il est par exemple très déroutant, mais le problème n'est pas une question de propogation

Problème que vous masquer vos côtés, mais votre .scope se superpose toujours avec la hauteur 100%;

Je ne suit:

HTML

<div class="container" ng-app="myApp"> 
    <div class="unrelated"> 
    <a href="http://stackoverflow.com">Stack overflow 
    </a><a href="http://www.goole.com">Google</a> 
    </div> 
    <div ng-controller="testing"> 
    <div class="scope {{ checkShow() }}" > 
     <div class="half-cover" ng-click="leftShow = false" ng-show="leftShow == true"> 
     Click to remove one 
     </div><div class="half-cover" ng-click="rightShow = false" ng-show="rightShow == true"> 
     Click to remove one 
    </div> 
    </div> 
</div> 
</div> 

JS

$scope.checkShow = function(){ 
    if($scope.leftShow == false && $scope.rightShow == false) { 
     return 'hidden-scope'; 
    } else { 
     return '' 
    } 
} 

Il vraiment déroutant, parce ng-if ne fonctionnait pas en quelque sorte, erros d'interpolation bizarre quand j'ai essayé {{rightShow && leftShow ? '' : '.hidden-scope'}}, je a décidé de mettre fin à $scope.checkShow

CSS

.hidden-scope { 
    height: 0; 
} 

jsFiddle demo

Answer 2

Ce n'est pas un problème en ce qui concerne l'événement .. votre div propogation (celui avec scope classe et ng-controller) est super-imposée à la div avec unrelated classe à cause de z-index: 1000.

L'une des façons (simples) d'accéder aux éléments ci-dessous consiste à réduire le z-index. Donc, en appliquant un ng-class qui le fait pour nous. Cela peut être n'importe quelle condition ou fonction.

ng-class="{'hideit': !leftShow && !rightShow}" 

où,

div.hideit { 
    z-index: -1 
} 

forked working fiddle