AngularJSのクラスを複数の要素に変更する

私はApache CordovaとAngularJSで書いているパズルアプリを持っています。パズルはグリッドで構成され、各グリッドには複数の「ライト」があります。AngularJSのクラスを複数の要素に変更する

あなたは光の一方をマウスオーバーすると、特定の領域が点灯します。私は標準的なjQueryでうまく動作していますが、マウスオーバーイベントはクラスにバインドされていますが、AngularJSで動作させるのに苦労しています。私はプロジェクトにフルjQueryを含めることができますが、それは不正行為のように感じます。

これまでのところ、私は次のディレクティブがあります - HTMLは次のように見ていると

app.directive('etkHighlight', function() { 
    return { 
     link: function (scope, element, attr) { 
      element.on("mouseenter", function() { 
       var id = attr.cage; 
       var el = angular.element(document).find(id); 
       el.addClass("etk-light-on"); 
       console.log("enter") 
      }) 
      element.on("mouseleave", function() { 
       var id = attr.cage; 
       console.log("enter") 
      }) 
     } 
    } 
});

を： - 私はOK、クラスを変更する必要があるオブジェクトのIDを取得しています

<div class="box"> 
    <div class="etk-key" id="cage-t">T</div> 
    <div class="etk-light etk-base-left etk-light-off" data-cage="cage-k" etk-Highlight>k</div> 
    <div class="etk-light etk-base-right etk-light-off" data-cage="cage-m" etk-Highlight>m</div> 
</div>

、およびelにはの何かが入っていますが、addClassは実際にクラスを追加できません。

私は間違っていますか？これはこれに近づける正しい方法ですか？理想的には、すべてのライトのマウスオーバーのクラス変更を管理するために使用できるものが必要です。

Plnkr： - lのラベルhttp://plnkr.co/edit/JjwucC3HECN9Mmm4S3Ib NBのみ点灯し、一番上の行に&メートルのKは、私はあまりにも問題が定義されていませんでしたが実現しましたディレクティブ

UPDATEを使用するように設定されています。私がマウスオーバーすると、例えば 'l'と書かれた光が、その光のクラスと、右と下にある 'L'の両方のクラスを変更したいと思っています....

出典

2016-04-12 grimorde

デモを追加することはできますか？ – RRK

クラス要素を追加していますか？あなたはng-class = "{'green'：item = 1}のようにng-class =" {'class'：result/expresion} "を使用できません" – MrNew

これは動作しますが、私はに取り付けられるclass名を渡すためにenterとhtmlでleaveを使用し、directiveのlink機能にattrs.enter & attrs.leave

*.htmlファイルとしてそれらを取得しました： -

<body ng-app='app'> 
    <div etk-highlight enter='red' leave='black'>test</div> 
</body>

*.jsファイル： -

var app = angular.module('app', []) 
.directive('etkHighlight', function() { 

return { 
    restrict: 'A', 
    link: function (scope, element, attrs) { 
     element.on("mouseenter", function() { 
      element.removeClass(attrs.leave); 
      element.addClass(attrs.enter); 
     }); 
     element.on("mouseleave", function() { 
      element.removeClass(attrs.enter); 
      element.addClass(attrs.leave); 
     }); 
    } 
} 
});

*.cssファイル： -

.red { 
    color:red; 
} 

.black { 
    color:black; 
}

出典

2016-04-12 10:45:24 manish

これは本当に近いです！しかし、それは私が全体の要件をあまりうまく説明していないことがわかった。更新情報： -/ – grimorde

あなたの答えは正しい方向で私を指していました - リンクされた要素の見つけ方を修正しなければなりませんでした 'element.on（" mouseenter "、function（）{ element.removeClass（attrs.leave） ; element.addClass（attrs.enter）; するvar ID = attrs.cage; VAR EL = angular.element（document.querySelector + ID（ '＃'））; el.removeClass（attrs.leave）。 el.addClass（attrs.enter）; }）; ' – grimorde

クラスを角度アドインクラスコードが削除され、あなたがスタイルを変えるの角のように使用します要するに

Angular ng-class

：あなたは角にバンドルされているNGクラスのディレクティブを見てみる必要があります。たとえば

コードでは、クリックに応じて変数をtrue/falseに設定します。この例をドキュメントでも見て、適切に調整してください。

出典

2016-04-12 07:43:23 PeterS

私はそれを見ましたが、ドキュメントの誤解各要素に特定のクラス、すなわち '

'を追加し、すべてのライトにng-mouseoverを追加する必要があると思います。これはちょうど私が '$（ '.etk-light'）とjQueryでできることを過剰なものとして私に打ち明けました。 $$ '' '' '' '' '' '' '' '' '' '' '' '' '' '$ ）; }）; – grimorde

私はまだここに示唆されているように、関数を呼び出すことを好む：[その他の回答]（http://stackoverflow.com/questions/28208165/passing-function-with-parameters-in- ng-class-to-get-the-class）あなたのdivのIDでgetClassを呼び出すことができます。それは物事をする角度のある方法なので、見る価値があるかもしれません。 – PeterS

私はあなたのペンで働いていましたが、私はもっとそれに行く必要があります。あなたの指示を他のものに置き換えましたが、まだそれは働いていません。あなたはng-class、ng-mouseenter、また、ng-styleを使用したり、style属性に関数を渡したりすることもできます。正確な問題を見つけるために、より深く自分のコードになりますあなたと私のために働く

directives.directive('showonhoverparent', 
    function() { 
     return { 
     link : function(scope, element, attrs) { 
      element.parent().bind('mouseenter', function() { 
       element.show(); 
      }); 
      element.parent().bind('mouseleave', function() { 
       element.hide(); 
      }); 
     } 
    }; 
});

希望。

出典

2016-04-12 08:08:53

AngularJSのクラスを複数の要素に変更する

答えて

関連する問題