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

问题描述：

我每次进入另一个状态时都会刷新我的模板和控制器。我不希望这样，我想保留在contact.html中输入的值的形式，例如当我更改为home.html时。我采用了棱角分明V1.6 & UI-路由器V1 +
这里是我的设置：AngularJS UI-Router - 每次更新状态而不重新加载模板

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>

我的问题是：

如何改变状态而不刷新我的模板/控制器。

那么你的问题是什么？ –

如何在不刷新模板/控制器的情况下每次更改状态 –

答

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

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 - 每次更新状态而不重新加载模板

相关推荐