0

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

 <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;

};

});

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

4

1 回答 1

2

您实现它的方式（顺便说一句，这没有多大意义），您需要为click窗口对象上的事件注册一个侦听器（并且因为我们在 Angular 中，我们应该使用该$window服务）。

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

你的控制器应该这样改变：

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));
    });
});

另请参阅这个简短的演示。

事实证明，我没有得到实际的要求，即每次用户单击 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>

另请参阅另一个简短的演示。

于 2014-05-10T17:06:03.153 回答