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

服务是一种单一的服务。这是一种奇特的方式，它是一个在程序活动的整个过程中保留的对象。

项目服务可能如下所示：

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中看到这一点您可以单击任何项目并更改其开/关状态。然后点击登录按钮触发另一条路线，那里有一个链接可以带你回来。状态将保持不变，而控制器将重新创建。

如果您对此有任何疑问，请随时询问！

在angularjs中保持导航的布尔切换状态

1 个答案: