我有一个复选框,用于切换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中来回导航时,如何保持图像显示?
答案 0 :(得分:1)
解决此问题的一种方法是将您的州/模型保留在服务中。
然后您可以将它注入您需要的地方:
ItemController.$inject = ['Items'];
function ItemController (Items) {
var vm = this;
vm.items = Items;
}
服务是一种单一的服务。这是一种奇特的方式,它是一个在程序活动的整个过程中保留的对象。
项目服务可能如下所示:
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中看到这一点 您可以单击任何项目并更改其开/关状态。然后点击 登录按钮触发另一条路线,那里有一个链接可以带你回来。 状态将保持不变,而控制器将重新创建。
如果您对此有任何疑问,请随时询问!