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

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

您可以使用服务，
事件
共享主控制器
或将参数传递给控制器

请查看nested views的angular-ui-router部分，它会为您提供一些实现参数传递给控制器的见解。

或者您可以配置这样的状态，以便所有状态使用相同的主控制器。

  .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

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

1 个答案: