angularjs - 在angularjs中保持导航的 bool 切换状态

Question

我有一个复选框，可以在 angularjs 的列表中切换图像。单击时切换显示图像。但是，当我导航到其他 View 然后返回到 ListView 时，图像的切换状态未选中。

ListView 复选框

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

Controller

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

导航期间没有页面刷新。

当用户在 SPA 中来回导航时，如何保持图像显示？

Answer 1

解决此问题的一种方法是将您的状态/模型保存在服务中。

然后你可以像这样在你需要的地方注入(inject)它:

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

如果您对此还有其他问题，请不要犹豫!