角度の入れ子にされたコンポーネントの親が定義されていません

Question

コントローラで親をまっすぐにしようとすると、なぜ私はundefinedが得られますか？私が関数内で使用すると、うまく動作します。

var sidebar = { 
    transclude: true, 
    bindings: { 
    isOpen: '=' 
    }, 
    controller: function() { 
    function toggle() { 
     //this.isOpen = !this.isOpen; 
     console.log('my test'); 
    } 
    this.toggle = toggle; 
    }, 
    template: ['$element', '$attrs',function ($element, $attrs) { 
    return [ 
    '<div class="sidebars" ng-transclude>', 
    '</div>' 
    ].join(''); 
    }] 
}; 

var sidebarItem = { 
    require: { 
    parent: '^sidebar' 
    }, 
    bindings: { 
    header: '=' 
    }, 
    controller: function() { 
    function mytest() { 
     // this works 
     console.log('isOpen is ',this.parent.isOpen); 
     this.parent.toggle(); 
    } 
    // here I got Parent is undefined 
    console.log('Parent is ',this.parent); 
    //this.parent.toggle(); 
    this.mytest = mytest; 
    }, 
    template: ['$element', '$attrs',function ($element, $attrs) { 
    return [ 
    '<div class="sidebar__item">', 
     '<h3 ng-click="$ctrl.mytest();">{{$ctrl.header}}</span>', 
     '<ul>', 
     '<li>Test</li>', 
     '</ul>', 
    '</div>' 
    ].join(''); 
    }] 
}; 
angular.module('layout.directives', []) 
    .component('sidebar', sidebar) 
    .component('sidebarItem', sidebarItem); 

Answer 1

あなたは$timeoutと

console.log('Parent is ',this.parent); 

をラップした場合、問題は解決しました。

そうでは、次のように：

$timeout(function(){ 
    // here I got Parent is undefined 
    console.log('Parent is ',this.parent); 
}) 

ダイジェストサイクルが完了した後にrequiredコンポーネントのコントローラのみ利用可能であるようです。テンプレート（mytest()関数内）から呼び出されたときに動作する理由です。