что я пытаюсь сделать: сделайте cursor:no-drop;
используя css для этого, прекрасные работы, но проблема в том, что я все еще получаю щелчок, когда я нажимаю значок.
Если вы видите, что мой значок превращается в красный, и я вставил cursor:no-drop;
по css. для пользователя не удастся щелкнуть, но щелкнуть еще раз, как я могу это решить? и блокировать щелчок, когда значок становится красным?
Спасибо.
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/
Изменение свойства 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 и с программированием вообще. :-)