0

I have general container which is full screen background and inside it i have small div with content. In general container i have ng-click which activated when i click on small div. How can i disable that?

<div class="generalContainer" ng-click="onlyBackground()">
    <div class="smallDiv">Content</div>
</div>

I have tried to add z-index on background and small div, but still function activated on small div. I am not sure if it's css matter or angular.

Honchar Denys
  • 1,408
  • 4
  • 29
  • 54
  • 1
    Take a look at stopping click propagation in your small div by adding an `ng-click` handler and calling `$event.stopPropagation()` in the handler. Similiar: http://stackoverflow.com/questions/20300866/angularjs-ng-click-stoppropagation – Tyler Shaddix Feb 07 '15 at 21:31
  • yeah, that same problem with the url you gave, couldn't find it before. – Honchar Denys Feb 07 '15 at 22:39

2 Answers2

4

Having child in dom, would affect parent element ng-click. This is because events go up in Dom tree. You can ommit it, by forcing to stop propagation: Use: 

<div class="generalContainer" ng-click="onlyBackground()">
    <div class="smallDiv" ng-click="$event.stopPropagation();">Content</div>
</div>

When you click on smallDiv, then click want propagate into parent.

changtung
  • 1,614
  • 15
  • 19
1

Does your element has a position property? z-index only works if the the element has a position property.

.generalContainer {
    position: relative;
    z-index: 1;
}
.smallDiv {
    position: relative;
    z-index: 9;
}
Matan Gubkin
  • 3,019
  • 6
  • 25
  • 44