2017-09-22 25 views
0

私はindex.htmに2ページのpageA.htmlとpageB.htmlを持っています。子状態から親状態に変数を渡す方法AngularJs ui-router

inのapp.jsでは、私はui-routerを使用しました。

私のアプリがJavaコントローラを実行すると、デフォルトで$ urlRouterProviderが有効になっているindex.htmlにアプリケーションをリダイレクトします。

だから、index.htmlの中で、私はapp.js

$urlRouterProvider.when('', '/pageA'); 
$stateProvider 

    .state('home', { 
     url : '/home', 
     views : { 
      "" : { 

       templateUrl : 'index.html', 
       controller : 'IndexController' 
      } 
     } 

    }) 
.state('pageA', { 
     url : '/pageA', 
     views : { 
      "" : { 

       templateUrl : 'pageA.html', 
       controller : 'pageAController' 
      } 
     } 

    }) 


    .state('pageB', { 
     url : '/pageB', 
     views : { 
      "" : { 

       templateUrl : 'pageB.html', 
       controller : 'pageBController' 
      } 
     } 

    }) 

}); 

<div ng-app="myApp"> 
<span>{{user.name} {{user.firstname}}</span> 
<a href="#pageA"><a/> 
<a href="#pageB"><a/> 
    <div ui-view ></div> 
</div> 

を持っている私は、ユーザー変数を設定するIndexControllerとPageAControllerの両方を試してみました:

$scope.user = UserService.getConnectedUser(); 

問題は、ユーザーがindex.htmlで認識されないことです。

私はそこにどのように渡すのか分かりませんか?

更新:

私は解決策を提案してみました: 私は私のIndexController.js

$rootScope.$broadcast('HomeEvent', "String"); // going down 
    $scope.$on("HomeEvent", function (evt, data) { 
      $scope.Message = "Inside HomeController : " + data; 
    }); 

そして、私のPageAController.js内に追加:

$rootScope.$on('HomeEvent', function (event, data) { 
     $scope.Message = "Inside PageAController : " + data; 
     console.log("data getted ="+$scope.Message); // 'Some data' 
}); 

そして、それはありません$ onで入力しても何か不足していますか?

+0

ブロードキャスト(チェーンの下の関数を呼び出す)とemit(チェーンの上の関数を呼び出す)を見ます。それは私たちが通常コントローラーの間で情報を渡すために使用するものです –

+0

Thx、interstingと私はそれを使用しようとしました、あなたは私の質問の更新を見ることができますか?tiハンドラーのイベントで$に入らない – selma

+0

$ timeout (関数(){}、500);子供が作成されるのを待つために – selma

答えて

1

ブロードキャスト(チェーンを介して関数を呼び出す)とemit(チェーンの上で関数を呼び出す)を使用して解決する問題と、ブロードキャストの時間を遅延時間に設定して、を参照して子の作成を待つこの待ち合わせlink

関連する問題