Nested div with ng-click in Angular

Question

There is the following code:

<div class="first" ng-click="funcFirst()">
  ... Some other content
  <div class="second" ng-click="funcSecond()">
  </div>
  ... Some other content
</div>

I want to do the following thing: if I click by anything inside "first" div except "second" - execute funcFirst function; if I click by "second" div - execute funcSecond function. Now if I click by "second" I execute funcFirst. How can I do it? I can't change HTML structure. Thanks in advance.

Possible duplicate of [Stop propagation of underlying ng-click inside a jQuery click event](http://stackoverflow.com/questions/21485827/stop-propagation-of-underlying-ng-click-inside-a-jquery-click-event) — leepowers, Oct 15 '15 at 19:47
There's a solution there without jQuery. http://stackoverflow.com/a/26185951/2163901 — Anid Monsur, Oct 15 '15 at 19:52

score 5 · Answer 1 · answered Oct 16 '15 at 02:32

I have solution for it:

script example:

 <script>
    myWebApp = angular.module('myWebApp', []);
    myWebApp.controller("Controller01", function ($scope) {

        $scope.funcFirst = function () {
            alert("click on div 1 content");
        };

        $scope.funcSecond = function () {
            alert("click on div 2 content");
        };
    });

</script>

HTML

<body ng-app="myWebApp">
<div ng-controller="Controller01">

    <div class="first" ng-click="funcFirst()">
        ... click on div 1 content
        <div class="second" ng-click="funcSecond(); $event.stopPropagation();">
            click on div 2 content
        </div>
        ... click on div 1 content
    </div>
</div>

Edit on plunker

Yes it works fine. This is more a javascript issue that an angular one. You can read this article to learn more about stopPropagation : https://developer.mozilla.org/fr/docs/Web/API/Event/stopPropagation. — Damien, Oct 16 '15 at 09:43

Nested div with ng-click in Angular

1 Answers1