在angular-ui-router中从子状态传递信息到父状态

Passing information from child state to parent state in angular-ui-router

本文关键字：状态 信息 angular-ui-router      更新时间：2023-09-26

我正在用ui-router构建一个angular应用程序，其中我有一个父视图和一个子视图。

routerApp.config(function($stateProvider, $urlRouterProvider) {
    $urlRouterProvider.otherwise('/home');
    $stateProvider
        .state('home', {
            url: '/home',
            templateUrl: '/views/home/home.html',
            controller: 'HomeController'
        })
        .state('new-assignment', {
            url: '/new-assignment',
            templateUrl: 'new-assignment.html',
            controller: 'AssignmentController'
        })
            .state('new-assignment.new-client', {
                url: '/new-client',
                templateUrl: 'new-client.html',
                controller: 'ClientController'
            })
    ;
});

子视图被用来创建一个新的客户端。因此，通过在主视图中点击"创建新客户端"。状态变为new-assignment。New-client '，显示侧视图。

当创建客户端时，我想转换回父视图'new-assignment'，并传递与刚刚创建的客户端的信息。

父视图仍然可以有自己形式的数据(用于创建赋值)，自然不应该被触碰。

我可以通过'$ statechangessuccess '事件来检测更改:

routerApp.controller('AssignmentController', function($scope, Assignment, Client, $log) {
    $scope.clients = Client.clients;
    $scope.$on('$stateChangeSuccess', function (e, toState, toParams, fromState, fromParams){
        $log.log(fromState.name + ' -> ' + toState.name);
        $log.log('toParams ');
        $log.log(toParams);
        $log.log('fromParams ');
        $log.log(fromParams);
    });
});

我试图通过

传递信息
$state.go('^', data);

but without success…

但是我不明白如何将数据传递给父视图。什么好主意吗?

子视图范围继承自父视图的范围。在AssignmentController中定义$scope.clients[]数组。然后将新客户端添加到ClientController中的数组中。

看一下这个Plunker，看看嵌套的视图作用域是如何访问它们的父视图作用域的

我将粗鲁地回答我自己的问题。

我决定使用事件消息传递:

app.controller('ClientController', function ($scope, $state, ClientService) {
    $scope.save = function (newClientData) {
        var ret = ClientService.create(newClientData);
        if (ret) {
            // Pass newly created object to parent view.
            $scope.$emit('clientCreated', newClientData);
            // Then go to that state (closing child view)
            $log.log($state);
            if ($state.current.name === 'new-client')
                return $state.go('home');
            $state.go('^');
        }
    };
});
app.controller('AssignmentController', function ($scope, Assignment, ClientService) {
    $scope.clients = ClientService.clients;
    $scope.$on('clientCreated', function (e, data) {
        $scope.clientSelected(data);
    });
    $scope.clientSelected = function (client) {
        $log.log(client);
        $scope.data.client = client;
        $scope.data.clientName = client.name;
        $scope.data.clientId = client.id;
    }
});

此代码链接到我的问题中的代码!

是的，各种各样的想法。

可以通过查询参数发送数据信息。将数据转换为JSON并发送如下"$state。Go ('^'， data)"，用"new- assignmentwww/?data"定义你的状态url。

如果数据被赋值，则可以获得信息并再次转换为对象。

其他，您可以使用"$state"访问父状态。$parent"并在控制器中赋值，然后你可以调用"$state.go('^')"。

你也可以在父状态的控制器中创建一个回调函数，在子状态的控制器中调用。

相关文章：