UI路由器：處理嵌套控制器

Question

我有以下配置：

.state("addUser", { 
     url: "/addUser", 
     templateUrl: "users/add-user.html", 
     controller: "AddUserParent", 
     controllerAs: "$ctrl", 
     abstract: true 
    }) 
     .state("addUser.General", { 
      url: "/General", 
      templateUrl: "users/add-user-general.html", 
      controller: "AddUser", 
      controllerAs: "$ctrl", 
     }) 
     .state("addUser.Cost", { 
      url: "/Cost", 
      templateUrl: "users/add-user-cost.html", 
      controller: "AddUser", 
      controllerAs: "$ctrl", 
     }) 
     .state("addUser.Notes", { 
      url: "/Notes", 
      templateUrl: "users/add-user-notes.html", 
      controller: "AddUser", 
      controllerAs: "$ctrl", 
     }) 

而繼父控制器：

angular 
    .module("users") 
    .controller("AddUserParent", AddUserParent); 

AddUserParent.$inject = ["usersSrv", "stateRouter"]; 
function AddUserParent(usersSrv, stateRouter) { 
    let $ctrl = this; 
    $ctrl.navigate = stateRouter.navigate; 
    $ctrl.user = {}; 

    $ctrl.addUser = function() { 
     usersSrv.addUser($ctrl.user); 
     console.log($ctrl.user); 
     $ctrl.navigate('home'); 
    } 
} 

兒童控制器AddUser就是空的。當我填寫：

<input type="text" ng-model="$ctrl.user.name"> 
<input type="text" ng-model="$ctrl.user.location"> 

在addUser.General狀態，並切換到addUser.Cost我失去所有$ctrl.user數據。爲什麼會這樣呢？如何解決這個問題？

Answer 1

因爲當你導航到另一個狀態，即使控制器是相同的，控制器重新加載會導致數據丟失。 所以你有多個選項來實現這一點。

• 你可以使用的服務，
• 事件
• 共享的主控制器
• 或參數傳遞給控制器​​

請檢查出的angular-ui-routernested views部分，它會給你一些洞察實現傳遞參數給控制器。

或者您可以像這樣配置狀態，以便所有狀態使用相同的主控制器。

.state("addUser.General", { 
     url: "/General", 
     templateUrl: "users/add-user-general.html" 
    }) 
    .state("addUser.Cost", { 
     url: "/Cost", 
     templateUrl: "users/add-user-cost.html" 
    }) 
    .state("addUser.Notes", { 
     url: "/Notes", 
     templateUrl: "users/add-user-notes.html" 
    }) 

，因爲你沒有指定的狀態定義控制器，所有子狀態使用相同的主控制器AddUserParent