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。を使用してサーバーにリクエストを行うロジックを分離し、serviceそれを構成に挿入することもできます。

親状態のどこかをクリックし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)
})()
于 2016-10-25T01:50:49.777 に答える