2014-11-20 5 views
1

У меня есть это приложение, которое имеет разные темы, которые пользователь может выбрать из навигационной панели. В этот момент Im просто пытается изменить переменную от false до истины.

Вот код, я работаю для нав:

<li> 
     <a ng-click="toggleTheme(blackWhite)"> Black and White theme</a> 
    </li> 

и вот код в контроллере.

$scope.blackWhite = false; 
//other themes are false 
$scope.toggleTheme = function(theme){ 
theme = !theme; 
console.log($scope.blackWhite);//its still false 
} 

Как это сделать? Спасибо

+1

javascript не имеет доступа к ссылке. –

+3

Вы никогда не меняете '$ scope.blackWhite', так почему бы не ошибиться? – im1dermike

ответ

2

Это должно работать нормально, если вы передаете строку для ссылки на нее вместо:

<li> 
    <a ng-click="toggleTheme('blackWhite')">Black and White theme</a> 
</li> 

Контроллер

$scope.blackWhite = false; 

$scope.toggleTheme = function(theme){ 
    $scope[theme] = !$scope[theme]; 
} 

Вам не нужно устанавливать или любую другие переменную blackWhite непосредственно в функции. Лучше всего отделить как можно больше, а именно, где вы собирались с ним изначально :)

+1

Отличное решение, я просто смотрел на проблему с уровнем поверхности в своем ответе (что было бы утомительно для реализации и поддержки нескольких тем). – jadarnel27

4

Вы передаете значение $ scope.blackWhite в эту функцию, а не ссылку на $ scope.blackWhite. Так что вам нужно обновить переменную $ области действия с новым значением, например:

$scope.toggleTheme = function(theme) { 
    $scope.blackWhite = !theme; 
} 

Или, еще лучше, не передать переменную вообще, так как вы просто переключая логическое значение:

$scope.toggleTheme = function() { 
    $scope.blackWhite = !$scope.blackWhite; 
} 

Тогда разметка будет:

<a ng-click="toggleTheme()">Black and White theme</a> 
Смежные вопросы