var属性に指定したコンポーネントをコントローラーで使用できない


下記のようにvar属性にcarouselコンポーネントを指定しております。

[code]

    <ons-carousel swipeable overscrollable auto-scroll fullscreen var="app.carousel" ng-controller="FooController">
    
[/code]

次にコントローラーでcarouselをログに出力しました所、undefinedが返って来てしまいます。  
こちらのコードの問題点わかりましたらご教示頂ければと思います。

よろしくお願いいたします。

[code]

    (function(){
    'use strict';
    
    app.controller('FooController', ['$scope', function($scope) {
        console.log(app.carousel);
    }]);
    })();
    
[/code]




コンポーネントにアクセスするにはOnsenUIの初期化完了を待つ必要がありますので、`ons.ready()`関数を利用してください。

[code]

    (function(){
    'use strict';
    
    app.controller('FooController', ['$scope', function($scope) {
        ons.ready(function(){
            console.log(app.carousel);
        });
    }]);
    })();
    
[/code]

参考  
<http://ja.onsen.io/guide/overview.html#UsingVarAttributeToSpecifyAComponent>




コンポーネントにアクセスするにはOnsenUIの初期化完了を待つ必要がありますので、`ons.ready()`関数を利用してください。

[code]

    (function(){
    'use strict';
    
    app.controller('FooController', ['$scope', function($scope) {
        ons.ready(function(){
            console.log(app.carousel);
        });
    }]);
    })();
    
[/code]

参考  
<http://ja.onsen.io/guide/overview.html#UsingVarAttributeToSpecifyAComponent>

