Question

我创建了一个滑动输入。当用户激活按钮时，它会转到另一个视图并返回到该按钮的视图，因此不会被按下。我需要按钮来保持状态。

我使用了ng-modal指令，并从控制器执行$ scope.attributebutton = true;但这不起作用

input.vpn[type="checkbox"]{
  -webkit-appearance: none;
  -moz-appearance: none;
  -webkit-transition: 400ms all;
  transition: 400ms all;
  margin: 0 auto 0 auto;
  display: block;
  border-radius: 50px;
  background: #c4003b;
  box-shadow: inset 0 0 0 2px rgba(0,0,0,.1);
  width: 56px;
  height: 26px;
  outline: 0;
  cursor: pointer;
  position: relative;
  -moz-user-select: none;
  -webkit-user-select: none;
  user-select: none;
  animation: input 4s;
}
input.vpn[type="checkbox"]:checked, input.vpn[type="checkbox"].checked {
  background: #60c674;
  box-shadow: inset 0 0 0 10px #6ABF76;
  transition: 250ms all;
}

input.vpn[type="checkbox"]::before {
  content:'';
  transition: 300ms all;
  position: absolute;
  left: 2px;
  top: 2px;
  bottom: 2px;
  right: auto;
  transform: translate(0,0);
  display: block;
  width: 32px;
  height: 22px;
  border-radius: 40px;
  background: #FFFFFF;
  box-shadow: 0 0 12px 0 rgba(0,0,0,0.06), 0 0 0 0 rgba(0,0,0,0.06), 0 6px 10px 0 rgba(0,0,0,0.15), 0 0 2px 0 rgba(0,0,0,0.07), 0 4px 6px 0 rgba(0,0,0,0.06), 0 1px 1px 0 rgba(0,0,0,0.11);
  animation: button 3s ease-out;
}

input.vpn[type="checkbox"]:checked::before, input.vpn[type="checkbox"].checked::before{
  transform: translate(20px,0);
}

<div class='col-md-6'>
    <div ng-if="error.network.status=='success'">
        <h2> 
            <span class="pull-right">
                <input type="checkbox" class="vpn" ng-model="vm.activo" ng-click='changeVpn()'>
            </span>
            VPN
        </h2> 
    </div>
</div>

Button

Answer 1

保存前端状态的两种最简单的方法是本地存储或状态参数。

本地存储

如评论中所述，使用本地存储来保存切换按钮的先前状态。

app.controller('myCtrl', ['$scope', function ($scope) {

  $scope.vm = {};
  // Try loading previous toggle state on controller initialization
  $scope.vm.activo = localStorage.getItem('activo') || false;

  $scope.changeVpn = function() {
    // Do your change VPN stuff
    // Then save the toggle state
    localStorage.setItem('activo', $scope.vm.activo);
  };

}]);

这是最简单的选项，但是您可能无法始终访问本地存储，具体取决于用户的浏览器设置和其他因素。

这是本地JS。此处的文档：https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage

UI路由器

如果您使用的是ui-router，则还可以从状态参数中检索它。

app.config(['$stateProvider', function($stateProvider) {

  $stateProvider.state({ 
    name: 'main',
    url: '/main?activo',
    params: {
      // Using dynamic routing params to update address bar
      activo: { type: 'bool', value: false, dynamic: true }
    },
    template: '<div ng-app="..." ng-controller="myCtrl"><!-- Your template here --></div>',
    controller: 'myCtrl'
  });

}]);

app.controller('myCtrl', ['$scope', '$state', '$stateParams', function ($scope, $state, $stateParams) {

  $scope.vm = {};
  // Try loading previous toggle state on controller initialization
  $scope.vm.activo = $stateParams.activo || false;

  $scope.changeVpn = function() {
    // Do your change VPN stuff
    // Then update state parameters
    $state.go('.', { activo: $scope.vm.activo });
  };

}]);

只要用户切换按钮，这就会更新地址栏。当用户离开页面时，切换状态将保存在浏览器历史记录中，并在初始化时加载。

有关详细信息，请参见ui-router文档：https://ui-router.github.io/ng1/docs/1.0.19/interfaces/params.paramdeclaration.html

如何滑动来自控制器的输入

1 个答案:

本地存储

UI路由器