如何避免丢失视图中的已完成字段

时间:2017-11-17 20:03:52

标签: angularjs

我有2个控制器,有2个视图。视图A包含多个输入文本,复选框,文本字段等。单击此表单上的<a>会将我重定向到视图B.视图B返回查看<a> A。

我怎么能这样做,当我回到视图A时,我不会错过我之前填写的表格上的信息? 我没有使用ng-model,因为我只想知道如何不丢失视觉数据。我认为这不重要或不是吗?

我理解ngStorage和ng-model。但我想知道是否有比按字段保存值更简单的解决方案?像cache:true

之类的东西
var myApp = angular.module('myApp', ['ui.router'])
.config(function ($stateProvider) {

    $stateProvider.state('A', {
        url: "/A",
        template: '<input type="text"><br><input type="checkbox"><br><input type="radio"><br><a ui-sref="B">NEXT</a>',
        controller: function ($scope) {
            console.log("A");
        }
    }).state('B', {
        url: "/B",
        template: '<a ui-sref="A">BACK</a>',
        controller: function ($scope) {
            console.log("B");
        }
    });
})

.controller('MainCtrl', function ($scope, $state) {
 $state.go("A");
});

http://jsfiddle.net/rw645c89/

1 个答案:

答案 0 :(得分:1)

为什么不使用服务来保存状态之间的数据?

http://jsfiddle.net/b41uo73t/

var myApp = angular.module('myApp', ['ui.router'])
.config(function ($stateProvider) {

$stateProvider.state('A', {
    url: "/A",
    template: '<input type="text" ng-model="mainService.inputValue"><br><input type="checkbox" ng-model="mainService.checkboxValue_1"><br><input type="radio" ng-model="mainService.checkboxValue_2"><br><a ui-sref="B">NEXT</a>',
    controller: function ($scope, MainService) {
        console.log("A");
        $scope.mainService = MainService;
    }
}).state('B', {
    url: "/B",
    template: '<a ui-sref="A">BACK</a>',
    controller: function ($scope) {
        console.log("B");
    }
});
})

.controller('MainCtrl', function ($scope, $state) {
 $state.go("A");
})

.service('MainService', function() {
 this.inputValue = "";
  this.checkboxValue_1 = false;
    this.checkboxValue_2 = false;

});