Question

我创建了两个div，每个div都有不同的角度函数。我想用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>

这是我的角度代码：

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

function Ctrl1($scope) {

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

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

如果我点击黄色div，它会显示警告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>

Answer 2

实际上，您的DOM树事件正在冒泡，以防止它使用

ng-click="toto(); $event.stopPropagation();"

您可以进一步阅读详细信息：
https://developer.mozilla.org/en/docs/Web/API/Event/stopPropagation

单击并在角度中运行一个div中的两个不同函数的一个函数

2 个答案: