Question

2つのディレクティブがあります。一つは、 "サブディレクティブ"

主である：

.directive('materialDropdown', function() { 
    // Input to directive 
    return { 
     scope: { 
     //'personalDb': '=', 
     }, 
     transclude: true, 
     controllerAs: 'vm', 
     bindToController: true, 
     controller: function(){ 
     console.log('material directive fires') 

     }, 
     template: '<select></select>', 
     restrict: 'E', 
     link: function(){} 
    }; 

}）。

サブ：

.directive('materialSizeDropdown', function() { 
    // Input to directive 
    return { 
     require: '^^materialDropdown', 
     controllerAs: 'vm', 
     transclude: true, 
     bindToController: true, 
     controller: function(){ 
     console.log('hello') 
     }, 
     template: '<h1>fire</h1>', 
     restrict: 'E', 
     link: function(){} 
    }; 

マークアップ：

<material-dropdown> 
    <material-size-dropdown></material-size-dropdown> 
    </material-dropdown> 

materialSizeDropdownは、マークアップには示されていない、そしてコントローラはいずれかの焼成されていません。

どうすれば解決できますか？

Answer 1

レンダリングに使用するmaterialDropdown指示文でtemplateオプションを使用しています。したがって、ネストされたディレクティブは決して表示されません。 <select>の<h1>は有効ではありません。