javascript - UI路由器: deal with nested controllers

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",
        })

以及以下父 Controller :

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');
    }
}

子 Controller 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

这是因为当您导航到另一个状态时，即使 Controller 相同， Controller 也会重新加载，从而导致数据丢失。因此您有多种选择来实现这一目标。

• 您可以使用服务，
• 事件
• 共享主 Controller
• 或将参数传递给 Controller ​​

请查看nested views angular-ui-router 部分它将让您了解如何将参数传递给 Controller ​​。

或者您可以像这样配置状态，以便所有状态都使用相同的主 Controller 。

  .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"
    })

因为您没有在状态定义上指定 Controller ，所以所有子状态都使用相同的主 Controller AddUserParent