Сохранять boolean toggle состояние при навигации в angularjs

Question

У меня есть флажок, который переключает изображение в списке в angularjs. Переключатель показывает изображения при нажатии. Однако, когда я перехожу к другим представлениям, а затем возвращаюсь к просмотру списка, состояние переключения для изображений не проверяется. не

Просмотр списка Флажок

<input type="checkbox" ng-click="vm.toggleImage()"> 

Список

<td ng-if="vm.showImage">  
<img ng-src="{{task.imageUrl}}" class="img-responsive img-thumbnail img-circle" /> 
</td> 

Контроллер

// Show Image 
    vm.showImage = false; 
    vm.toggleImage = function() { 
     //Inverse Boolean 
     vm.showImage = !vm.showImage; 
    } 

Там ни одного обновления страницы во время навигации.

Как сохранить изображения, пока пользователь перемещается вперед и назад через SPA?

Answer 1

Один из способов решения этой проблемы - сохранить ваше состояние/модель в обслуживании.

, то вы можете вводить его там, где вам это нужно так:

ItemController.$inject = ['Items']; 
function ItemController (Items) { 
    var vm = this; 
    vm.items = Items; 
} 

услуга является singelon. Это причудливый способ сказать, его объект, который сохраняется в течение всего времени, когда программа активна.

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

function Items() { 
    return [ 
    {name: 'test1', on:true}, 
    {name: 'test2', on:true}, 
    {name: 'test3', on:false}, 
    {name: 'test4', on:true}, 
    {name: 'test5', on:false}, 
    ]; 
} 

Вы можете увидеть это в действии, в following plunk вы можете нажать на любой из элементов и изменить их состояние вкл/выкл. затем нажмите кнопку регистрации , чтобы запустить другой маршрут, там есть ссылка, которая вернет вас. состояние останется неизменным, в то время как контроллер будет воссоздан.

Не стесняйтесь спросить, есть ли у вас дополнительные вопросы по этому поводу!