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 に答える