Question

假设我有一个DIV，其中指定了ng-click点击它时调用的函数。

在此DIV内，有一个BUTTON，其中还有一个函数可供点击时使用ng-click指定。

单击按钮时，将调用DIV的点击和BUTTON的点击功能。如何才能使BUTTON的函数被调用？

我已设置此fiddle以更好地说明我的意思。以下是代码：

HTML：

<body ng-app="Test">
    <section ng-controller="TestCtrl as ctrl">
        <div class="square" ng-click="ctrl.divClick()">
            <span>My text</span>
            <button ng-click="ctrl.buttonClick()" >My button</button>
        </div>
    </section>
</body>

JavaScript的：

(function() {
    var app = angular.module('Test', []);

    app.controller('TestCtrl', [function() {
        this.divClick = function() {
            alert('div clicked');            
        };

        this.buttonClick = function() {
            alert('button clicked');
        }
    }]);
})();

修改：

正如akonsu所建议的那样，我只需要停止事件传播。这对我有用。这是一个更新的Fiddle，展示了它的工作原理。

Answer 1

只是停止传播事件：

<button ng-click="ctrl.buttonClick($event)">

this.buttonClick = function(e) {
  e.stopPropagation();
  alert('button clicked');
}

元素及其父元素指定了ng-click，两者都被调用

1 个答案: