1

.component()ディレクティブを持つAngular<md-sidenav>が独自のコンポーネントのコントローラーから見つからない理由を理解しようとしています。Angular は次のエラーをスローします。

ハンドル メニューのインスタンスが見つかりません

コンポーネント全体は次のとおりです。

function controller($mdSidenav) {
    $mdSidenav("menu").open();
}
controller.$inject = ["$mdSidenav"];

components.component("sideAppMenu", {
    controller: controller,
    controllerAs: "model",
    templateUrl: "path/to/template"
});

...そしてそのテンプレートは次のとおりです。

<md-sidenav class="md-sidenav-left md-whiteframe-z2" md-component-id="menu">
    hello world
</md-sidenav>

全体<md-sidenav>を自分のindex.html(つまり、ディレクティブ/コンポーネントの外に)移動すると、 $mdSidenavAngular Material コンポーネント全体を見つけることができます。

ここで何がうまくいかないのですか?詳細がありませんか?

コンポーネント全体がレンダリングされていることを確認できます。つまり、テンプレートが見つかり、正常に注入されます。

アップデート

問題がどこにあるのかを突き止めることができました。それはコンポーネントのライフサイクルに関するものです。$timeoutコントローラーコードに到達してしばらくしてから、いわゆるAngular Materialコンポーネントにアクセスしようとすると、$mdSidenav コンポーネントを見つけることができます:

function controller($mdSidenav, $timeout) {
    $timeout(function() {
        // OK!!!!!!!!
        $mdSidenav("menu").open();
        debugger;
    },3000);
}
controller.$inject = ["$mdSidenav", "$timeout"];

問題がコンポーネントにいつアクセスするかである場合、コントローラーが初期化されるときである場合、いつ Angular Material コンポーネントにアクセスしようとする必要がありますか?

4

1 に答える 1