在分部之间导航后保持复选框处于选中状态答案

【问题标题】：Keep Checkbox Checked After Navigating Bewteen Partials在分部之间导航后保持复选框处于选中状态
【发布时间】：2015-10-22 07:29:30
【问题描述】：

我正在构建一个单页梦幻足球应用程序，其中包含每个位置的部分页面并显示球员列表。

我想在每个球员旁边设置一个复选框，当球员被选中时，我可以选中该复选框并在该球员姓名中划一条线。

在浏览应用程序时，我在保持复选框处于选中状态时遇到问题。当我浏览页面时，复选框的状态会丢失。我不确定如何在 Angular.js 中实现这一点。

以下是我的测试应用程序的代码。

index.html

<!DOCTYPE html>
<html>

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular-route.min.js"></script>
<script src="script.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://rawgithub.com/gsklee/ngStorage/master/ngStorage.js"></script>
<script src="jquery.cookie.js"></script>
</head>

<body ng-app="RoutingApp">
    <h2>AngularJS Routing Example</h2>
    <p>Jump to the <a href="#first">first</a> or <a href="#second">second page</a></p>
    <div ng-view>
    </div>
</body>
</html>

first.html

<!DOCTYPE HTML>
<html>
  <head>
    <script src="jquery.cookie.js"></script>
    <meta charset="utf-8">
    <title>Persist checkboxes</title>
    <style>
    button{
      margin-top:8px;
    }
    </style>
  </head>

  <body>
  <h1>First Page</h1>
    <div>
      <label for="option1">Option 1</label>
      <input type="checkbox" id="option1">
    </div>
    <div>
      <label for="option2">Option 2</label>
      <input type="checkbox" id="option2">
    </div>
    <div>
      <label for="option3">Option 3</label>
      <input type="checkbox" id="option3">
    </div>

    <button>Check all</button>

   </body>
</html>

second.html

<!DOCTYPE html>
<html ng-app="app">

  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
    <script src="https://rawgithub.com/gsklee/ngStorage/master/ngStorage.js"></script>

    <script>
      angular.module('app', [
        'ngStorage'
      ]).

      controller('Ctrl', function(
        $scope,
        $localStorage
      ){
        $scope.$storage = $localStorage.$default({
          x: 42
        });
      });
    </script>
  </head>

  <body ng-controller="Ctrl">
    <button ng-click="$storage.x = $storage.x + 1">{{$storage.x}}</button> + <button ng-click="$storage.y = $storage.y + 1">{{$storage.y}}</button> = {{$storage.x + $storage.y}}
  </body>

</html>

路由脚本

angular.module('RoutingApp', ['ngRoute'])
    .config( ['$routeProvider', function($routeProvider) {
        $routeProvider
            .when('/first', {
                templateUrl: 'first.html'
            })
            .when('/second', {
                templateUrl: 'second.html'
            })
            .otherwise({
                redirectTo: '/'
            });
    }]);

【问题讨论】：

标签： javascript html angularjs angularjs-routing

【解决方案1】：

你在当前的代码中犯了很多错误

这里我在下面提到了一些。

不要在局部视图中添加完整的html。他们应该只提及所需的 html。
控制器应该从路由controller定义映射到他们的视图。
使用服务/工厂在不同控制器之间共享数据。
在声明ng-model 时使用点规则有助于维护prototypical inheritance。

代码

angular.module('RoutingApp', ['ngRoute', 'ngStorage'])
  .config(['$routeProvider', function($routeProvider) {
    $routeProvider
      .when('/first', {
        templateUrl: 'first.html',
        controller: 'FirstCtrl'
      })
      .when('/second', {
        templateUrl: 'second.html',
        controller: 'SecondCtrl'
      })
      .otherwise({
        redirectTo: '/'
      });
  }]);

angular.module('RoutingApp').controller('SecondCtrl', function($scope, $localStorage) {
    $scope.$storage = $localStorage.$default({
      x: 42
    });
  })
  .controller('FirstCtrl', function($scope, $localStorage, checkboxService) {
    $scope.model = checkboxService.data
  })
  .service('checkboxService', function() {
    var checkboxService = this;
    checkboxService.data = {
      option1: false,
      option2: false,
      option3: false
    };
  })

Working Plunkr

【讨论】：

我发布的代码只是我在学习如何执行此操作时从互联网上复制并使用的示例。感谢您的帮助，这正是我想要的。