4

我有一个包含一些嵌套视图的页面，使用ui.router并且我想将一些数据从父控制器传递到子控制器，而不向子控制器注入无用的服务。

在我看来，像这样的东西将是完美的

        state('home', {
            url: "/home",
            templateUrl: "parts/home.html",
            controller: "FatherController"
        }).
        state('home.child', {
            url: "/child",
            templateUrl: "parts/home/child.html",
            controller: "ChildController",
            params: {$scope.data = $rootScope.someData}
        })


你碰巧知道是否有办法做到这一点？

4

4 回答 4

11

如果您的子视图嵌套在父视图中，您的子控制器将自动继承父范围。

您应该能够直接从子控制器访问父控制器的数据。

于 2013-11-08T20:38:31.297 回答
6

好吧，我想您并不总是可以选择将数据移动到父控制器等。

我对此的建议是使用解析器（https://github.com/angular-ui/ui-router/wiki#resolve）来做一些魔术。

这是一个关于如何使其工作的示例：

var dataResolver = ['$scope', '$stateParams', 'Service',
    function($scope, $stateParams, Service) {
        Service.get($stateParams.objectId).then( function(obj) {
            $scope.myObject = obj;
            return obj;
        });
     };
 ];

 $stateProvider.state("foo.details", {
     "url": '/foo/:objectId', 
     "resolve": { "data": dataResolver },
     "controller": "SomeController",
     "template": "<ui-view />"
 )

当控制器被实例化时，你会神奇地获得 $scope.obj 数据，无论如何。

于 2014-04-06T06:05:27.743 回答
1

您可以使用查询参数并使用 $stateParams 访问

https://github.com/angular-ui/ui-router/wiki/URL-Routing

于 2013-11-08T16:16:57.107 回答
0

好吧，在我的项目中，我使用resolve.Angular UI router

基本上，在初始化父状态时，它将从服务器检索数据并将其存储到listItem. 您还可以使用 a 分离向服务器发出请求的逻辑service并将其注入到配置中。

假设我单击父状态中的某个位置Id以使用查询字符串打开新的子状态。然后我们得到这个id并$stateParams过滤以找到正确的项目listItem（使用下划线）

路由.js

.state('parent', {
    url: '/parent',
    templateUrl: 'parent-template.html',
    controller: 'ParentController',
    resolve: {
        listItem: ['$http', '$stateParams', function ($http, $stateParams) {
            return $http.get({'/GetListItem'}).then(function successCallback(response) {
                return response.data;
            }, function errorCallback(response) {
                return [];
            });
        }]
    }
})
.state('parent.child', {
    url: '/{itemId}',
    templateUrl: 'child-template.html',
    controller: 'ChildController',
    resolve: {
        item: ['$stateParams', 'listItem', function ($stateParams, bundles) {
            return _.findWhere(listItem, { Id: $stateParams.itemId });
        }]
    }
})

然后你可以像下面这样访问listItem和item在控制器中。

父控制器.js

(function () {
    function ParentController($scope, listItem) {

    }

    ParentController.$inject = ['$scope', 'listItem']

    angular.module('app').controller('parentController', ParentController)
})()

child.controller.js

(function () {
    function ChildController($scope, item) {

    }

    ChildController.$inject = ['$scope', 'item']

    angular.module('app').controller('childController', ChildController)
})()
于 2016-10-25T01:50:49.777 回答