Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Nested div with ng-click in Angular

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.

like image 1000
malcoauri Avatar asked Jul 21 '26 18:07

malcoauri


1 Answers

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

like image 181
Lewis Hai Avatar answered Jul 24 '26 09:07

Lewis Hai



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!