有没有办法从ui.router将变量传递给控制器​​？

Question

我有一个使用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}
        })

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

Answer 1

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

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

Answer 2

嗯，我猜你总是可以选择将数据移动到父控制器等。

我对此的建议是使用解析器（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数据，无论如何。

Answer 3

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

进行访问

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

Answer 4

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

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

假设我单击父状态中的某个位置以Id作为查询字符串打开新的子状态。然后我们按id获取此$stateParams并过滤以在listItem中找到正确的项目（使用Underscore）

<强> route.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，如下所示。

<强> parent.controller.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)
})()