Question

我创建了一个ng-click函数，它正在执行我需要的基础知识，添加一个活动状态类click here。我似乎有一个问题，当我想点击活动时删除活动类。

 <div ng-click="showTooltip(activeTooltip)" ng-class="{ active: activeTooltip == active }">Tooltip!</div>
<script>
var app = angular.module('myApp', []);

app.controller('IndexController', function($scope) {

 $scope.activeTooltip = 'Adam';
 $scope.active = '';

 $scope.showTooltip = function(active) {

$scope.active = active;

};

}）;

有谁知道这样做的正确方法？

Answer 1

你实现它的方式（btw没有多大意义），你需要在window对象上注册click事件的监听器（因为我们在Angular中我们应该使用$window服务。）

每次窗口对象收到点击事件时，都应将$scope.active重置为'' 此外，在调用$scope.showTooltip()时，我们需要停止click事件的进一步传播，因此如果首先由<div>捕获它，它就不会到达窗口对象。 / p>

您的控制器应该像这样更改：

app.controller('IndexController', function($scope, $window) {
    $scope.activeTooltip = 'Adam';
    $scope.active = '';

    $scope.showTooltip = function (active, evt) {
        evt.stopPropagation();   // Don't let it reach $window
        $scope.active = active;    
    };

    $window.addEventListener('click', function (evt) {
        $scope.$apply($scope.showTooltip.bind($scope, '', evt));
    });
});

另请参阅此 short demo 。

事实证明我没有得到实际的要求，即每次用户点击div时应该切换（添加/删除）工具提示类。因此，window上不需要事件监听器，代码应该像这样修改：

app.controller('IndexController', function($scope, $window) {
    $scope.activeTooltip = 'Adam';
    $scope.active = '';

    $scope.showTooltip = function (active) {
        $scope.active = ($scope.active === active) ? '' : active;
    };
});

<div ng-class="{active:activeTooltip===active}"
     ng-click="showTooltip(activeTooltip)">
    Tooltip!
</div>

另请参阅其他 short demo 。

添加在ng-click功能上删除ng-class

1 个答案: