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.
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
