Angular.js CSSを適用するにはどうすればいいですか？

Question

私がしようとしていることは：cursor:no-drop;これはcssを使用していますが、問題は問題ですアイコンで。

私のアイコンが赤色に変わり、cssでcursor:no-drop;を挿入しました。クリックすることができないユーザーのために、しかし、私はこれを解決することができますか？アイコンが赤色に変わったらクリックをブロックしますか？

ありがとうございました。

HTML +角度

<div ng-app> 
    <div ng-class="{'selected-gamepad':tog==1}"> 
    <br> 
    <i class="fa fa-lg fa-gamepad" ng-class="{'gamepad-blue': iTog1}" 

    ng-click="iTog1 = !iTog1"></i> 
    <span id='1' ng-click='tog=1; iTog1 = false;'>span 1</span> 
    </div> 

    <div ng-class="{'selected-gamepad':tog==2}"> 
    <br> 
    <i class="fa fa-lg fa-gamepad" ng-class="{'gamepad-blue': iTog2}" ng-click="iTog2 = !iTog2"></i> 
    <span id='2' ng-click='tog=2; iTog2 = false;'>span 2</span> 
    </div> 
</div> 

CSS：

.selected-gamepad > span { 
    border: dotted pink 3px; 
} 

.selected-gamepad > i { 
    color: red; 
    cursor:no-drop; 
} 

.gamepad-blue, 
.selected-gamepad .gamepad-blue{ 
    color: blue; 
} 

jsfiddle：http://jsfiddle.net/zvLvg/290/

Answer 1

はCSSでcursorプロパティを変更すると、魔法を無効にクリックしない - それはちょうどそれてカーソルを変更あなたがクリックできないように見えます。クリックを無効にする場合は、コードに追加のロジックが必要です。

コードを少し修正して、一部のロジックをコントローラに移動しました。コードははるかに優れているかもしれませんが、私はあなたに任せます - それについてのチュートリアルを読んで、より洗練されたAngular構文に慣れて、より良いコードを書くようにしてください:-)。

あなたが本当に必要としていたことは、パッドが選択されたときにプレーヤーがクリックするのをブロックすることでした。私はtoggle関数内if文で簡単なチェックを追加することによって、それをやった：

ビュー：

<div ng-app="app"> 
    <div ng-controller="GameController as vm"> 
    <div ng-class="{'selected-gamepad':vm.tog==1}"> 
     <br> 
     <i class="fa fa-lg fa-gamepad" ng-class="{'gamepad-blue': vm.iTogs[1]}" ng-click="vm.toggle(1)"></i> 
     <span id='1' ng-click='vm.selectPad(1)'>span 1</span> 
    </div> 

    <div ng-class="{'selected-gamepad':vm.tog==2}"> 
     <br> 
     <i class="fa fa-lg fa-gamepad" ng-class="{'gamepad-blue': vm.iTogs[2]}" ng-click="vm.toggle(2)"></i> 
     <span id='2' ng-click='vm.selectPad(2)'>span 2</span> 
    </div> 
    </div> 
</div> 

ロジック：

<script> 
    // Register module 
    angular.module('app', []); 

    // Create controller 
    angular.module('app') 
    .controller('GameController', function() { 
     var self = this; 

     self.tog = null; 
     self.iTogs = [false, false]; 

     self.toggle = function(index) { 
     if (self.tog != index) { 
      self.iTogs[index] = !self.iTogs[index]; 
     } 
     } 

     self.selectPad = function(index) { 
     self.tog = index; 
     self.iTogs[index] = false; 
     } 
    }); 

</script> 

はここplunkerを働いている：

http://jsfiddle.net/zvLvg/291/

---

私が何をしたか少し説明

は、コントローラにロジックの一部を移動しました。コントローラでは、アプリケーション内のさまざまな部分を分けて、さらにのコントロールがあります。また、ディレクティブ内の直接式の代わりに関数を使用すると、コードがはるかにクリーンになります（先にng-clickで行ったように）。

また、数値に変数を命名する代わりに、配列を作成しました。パッドのリスト内のdivはほぼ同じで、1つのdivとng-repeatで置き換えられる可能性があります。また、プロパティの名前は、より良い可能性があります - 今彼らは本当にあなたがそれらを見てどういうことを言っていない。

これらの小さなヒントが、角度を使ったりプログラミングしたりするのに役立つことを願っています。:-)