Question

每次去其他州时，我的模板和控制器都会令人耳目一新。我不想这样，我想将我输入的值保存在contact.html中，例如当我更改为home.html时。我正在使用Angular v1.6＆amp; UI-Router v1 +
这是我的设置：

function() {
        "use strict";
        angular.module("App").config(["$stateProvider", "$urlRouterProvider", "$locationProvider", "$compileProvider", function(a, b, c, d) {
            c.html5Mode(false), c.hashPrefix(""), b.otherwise("/"), a.state("home", {
                url: "/",
                templateUrl: "views/home.html",
                controller: "HomeCtrl"
            }).state("projekte", {
                url: "/projekte",
                templateUrl: "views/projects.html",
                controller: "ProjectsCtrl"
            }).state("labor", {
                url: "/labor",
                templateUrl: "views/lab.html",
                controller: "LabCtrl"
            }).state("kontakt", {
                url: "/kontakt",
                templateUrl: "views/contact.html",
                controller: "ContactCtrl"
            })
            d.debugInfoEnabled(false);
        }])
    }.call(this),

我的index.html结构：

<body ng-app="App">
   <main ui-view="">
           ..contact.html ..projects.html
  </main>
</body>

我的问题是：

如何在不刷新模板/控制器的情况下在状态之间切换。

Answer 1

为什么你想这样做，这是默认行为，因为你并不是那么复杂的要求。相反，你应该做的是通过编写服务/工厂和工作来保存表单的模型值。初始加载时只需从该数据加载表单字段（使用依赖注入）。

myApp.service('formDataService', function(){
  var formData;
  this.getData = function(){
    return formData;
  }
  this.setData = function(data){
    formData = data;
  }
});

您的控制器代码可以是：

myApp.controller('ContactCtrl', function($scope, formDataService){
    var initialData = formDataService.getData();
    $scope.user = angular.copy(initialData);
    $scope.$watch('user', function(n, o){
      formDataService.setData($scope.user);
    });
});

其中$scope.user是表单字段的模型对象。

Plunker

AngularJS UI-Router - 每次更改状态而不重新加载模板

1 个答案: