Angular.js, как применить курсор: без капли в классе CSS

Изменение свойства cursor в CSS не магически отключает нажатие - оно просто меняет курсор, поэтому похоже, что вы не можете щелкнуть. Если вы хотите отключить нажатие, вам понадобится дополнительная логика в вашем коде.

Я немного изменил код, чтобы очистить его и переместил некоторую логику в контроллер. Код, конечно, может быть намного лучше, но я оставляю его вам - попробуйте прочитать некоторые уроки об этом и познакомиться с более чистым синтаксисом Angular, чтобы лучше писать код :-).

Возвращаясь к проблеме - вам действительно нужно было заблокировать игрока от щелчка, когда выбран пэд. Я сделал это, добавив простую проверку с выражением if внутри функции toggle:

Посмотреть:

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

Здесь работает плукер:

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

Небольшое объяснение

То, что я сделал, это переместить часть логики контроллеру. Контроллеры позволяют вам разделить разные части приложения и иметь больше контроля над ними. Кроме того, код намного чище, когда вы используете функции вместо прямых выражений внутри директив (например, вы делали это с помощью ng-click ранее).

Я также создал массив вместо имен переменных с числами. Дальнейшие улучшения состоят в том, чтобы использовать ng-repeat чтобы избежать повторения кода - divs внутри вашего списка пэдов почти одинаковы и могут быть заменены одним div и ng-repeat. Кроме того, имена свойств могут быть лучше - теперь они действительно не говорят, что они имеют в виду, если вы посмотрите на них.

Надеюсь, эти небольшие подсказки помогут вам лучше разобраться с Angular и с программированием вообще. :-)