javascript - 防止同一页面上 Controller 和指令的默认值

Question

我的表格有两个单击操作 - 第一个是单击负责打开反馈的整行，第二个是单击将项目添加到团队的名称。

<div id="content_people" ng-show="active=='people'" ng-controller="DevsListCtrl">
    <table ng-table="tableParams" class="table">
        <tbody ng-repeat="d in $data" ng-controller="feedbackCtrl">
            <tr ng-click="onItemClick(d.name,$event)">
                <td add-new-team-member data-title='name' data-value="{{d}}">{{d.name}}</td>
                <td data-title='age'>{{d.age}}</td>
                <td data-title='grade'>{{d.grade}}</td>
                <td data-title='job'>{{d.job}}</td>
            </tr>
            <tr ng-show="isOpen(d.name)" ng-repeat = "f in getFeedback(d.name)" >
                <td colspan="4" width="100%">
                    {{f}}
                </td>
            </tr>
            <tr ng-show="isOpen(d.name)">
                <td colspan="4" width="100%" ng-form="feedbackForm">
                    <input id="name" type="text" ng-model="comment" ng-minlength="10" required>
                    <input ng-click="submitNewFeedback(d.name, comment)" type="submit" value="Add new feedback" ng-disabled="feedbackForm.$invalid" >
                <td>
            </tr>
        </tbody>
    </table>
</div>

当前也单击整行打开反馈部分。我想防止这种情况并寻找解决方案，因为我们在指令情况下有类似的情况:

mainApp.directive("addNewTeamMember", ['teamSharedObj', function (teamSharedObj) {
    return {
        restrict: 'A',
        link: function( scope, element, attrs ) {
            element.bind('click', function(e) {
                e.preventDefault();
                console.log(scope.teamMemberName)
                scope.$apply(function() {
                    if (typeof teamSharedObj.selected == 'undefined') {
                        alert("No team. Please select team.");
                        return;
                    }

                    var result = [];
                    var asObject = JSON.parse(attrs.value);
                    result.push(asObject);
                    teamSharedObj.addTeamMembers(teamSharedObj.selected, result);
                });
            });
//            element.on('click', function(e){
//                e.preventDefault();
//            });
        }
    }
}])

我尝试了不同的情况，但没有任何效果。最流行的建议是使用事件来防止其他人的操作命中:

$scope.clicked = function(what, event) {
    alert(what + ' clicked');
    if(event){
      event.stopPropagation();
      event.preventDefault();
    }
  }

我的 Controller 是:

mainApp.controller("feedbackCtrl", [ '$scope', 'teamSharedObj', function($scope, teamSharedObj) {
    // control visibility state
    $scope.state = 'off';
    $scope.selected = "undefined";
    $scope.isOpen = function(employee) {
        return $scope.state === "on" && $scope.selected === employee;
    }
    // handle click on item
    $scope.onItemClick = function(employee, event) {
        event.stopPropagation();
        event.preventDefault();
        $scope.state = ($scope.state === 'on' ? 'off' : 'on');
        $scope.selected = employee;
    }
    // open appropriate feedback container
    $scope.getFeedback = function(employee) {
        var result = teamSharedObj.feedback[employee] ? teamSharedObj.feedback[employee] : "<div> No values </div>";
        return result ;
    }
    $scope.submitNewFeedback = function(employee, feedback) {
        teamSharedObj.addFeedback(employee, feedback);
    }
}]);

我发现行内的指令单击首先调用，然后才点击 Controller 单击。我在两者上都设置了preventDefault，但问题仍然相同。对于这种情况，您有什么想法可以提供帮助吗？

Answer 1

如果我理解正确，您需要以下内容:

点击带有 add-new-team-member 属性的 td 应该只会触发指令中的点击事件处理程序。

单击该行上的任何其他位置都应触发 Controller 中的 onItemClick 函数。

preventDefault 不会帮助您解决此问题，因为它只会阻止浏览器对该事件执行的默认操作。

为此，您需要的是 stopPropagation，它可以阻止事件在事件链中向上冒泡。

您拥有的简化版本:

<tr controller-event-listener>
  <td directive-event-listener>
  </td>
</tr>

如果您点击td并且不希望事件冒泡到tr，则需要调用stopPropagation。

将其放入您的指令中应该就足够了:

element.on('click', function(e) {
  e.stopPropagation();