Question

我正在使用ui-router构建一个angular-app，我有一个父视图和一个子视图。

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＆＃39;，并显示侧视图。

创建客户端后，我想转换回父视图＆＃39; new-assignment＆＃39;并传递有关刚刚创建的客户端的信息。

父视图仍然可以拥有自己的数据（用于创建作业），自然不应该被触及。

我可以通过$ stateChangeSuccess＆＃39;来检测更改。事件：

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

但没有成功......

但我不了解如何将数据传递到父视图。有什么想法吗？

Answer 1

子视图范围继承自父视图的范围。因此，只需在$scope.clients[]中定义AssignmentController数组即可。然后在ClientController。

中将新客户端添加到该数组

Take a look at this Plunker查看嵌套视图范围如何访问其父视图范围。

Answer 2

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

我决定使用事件消息：

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

此代码与我的问题中的代码相关联！

Answer 3

是的，各种各样的想法。

您可以使用查询参数发送数据信息。将您的数据转换为JSON并像这样发送＆＃34; $ state.go（＆＃39; ^＆＃39;，数据）＆＃34;并使用＆＃34; new-assignmentww /？data＆＃34;。

定义您的州网址

如果分配了数据，您可以获取信息并再次转换为对象。

其他，您可以使用＆＃34; $ state。$ parent＆＃34;来访问父状态。并在控制器中分配值，然后您可以调用＆＃34; $ state.go（＆＃39; ^＆＃39;）＆＃34;。

您还可以在父状态的控制器中创建回调函数，并在子状态的控制器中调用。

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

3 个答案: