javascript - 单击并在一个 div 中以 Angular 运行两个不同函数的一个函数

Question

我创建了两个 div，每个 div 都有不同的 Angular 函数。我想使用 ng-click 单击其中之一。如果其中一个 div 得到点击，希望我它会运行自己的功能，但在我的情况下它总是运行两个功能。我的代码如下所示:

这是我的 html 代码:

<div ng-controller="Ctrl1">
    <div ng-click="titi();" style="width:200px; height:200px; background-color:red;">
         <div ng-click="toto();" style="width:100px; height:100px; background-color:yellow;">Click me</div>
    </div>
</div>

这是我的 Angular 代码:

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

function Ctrl1($scope) {

    $scope.toto = function(){
        alert('toto');
    };

    $scope.titi = function(){
        alert('titi');
    };
}

如果我点击黄色的 div，它会显示 alert toto 和 titi。如果我单击红色 div，它只会显示 titi 警报。我想要的只是当我单击其中一个时，它们将运行自己的函数单击。有什么不对？请帮助:(

Answer 1

这里单击内部元素 div 会传播到外部 div。使用 $event.stopPropagation(); 防止点击传播:

<div ng-controller="Ctrl1">
    <div ng-click="titi();" style="width:200px; height:200px; background-color:red;">
         <div ng-click="toto(); $event.stopPropagation();" style="width:100px; height:100px; background-color:yellow;">Click me</div>
    </div>
</div>