Angularディレクティブを別のディレクティブにレンダリングするにはどうすればよいですか？

Question

親ディレクティブ内に子ディレクティブを作成し、テンプレートからのHTMLをブートストラップモーダルに挿入する次のモーダル属性（childディレクティブ内）を使用する方法はありますか？子ディレクティブには、テンプレートに質問属性とモーダル属性が含まれます。

This articleこの例では、固有の属性、つまりquestionとmodal属性を持つ特定の子ディレクティブが必要なため、役に立たない。

HTML：

<learn-card title="Eligibility"> 
    <learn-item question="Who Can Purchase a meal plan" modal="/elegibility/HowDoISignup.html"></learn-item> 
    <learn-item question="How Do I sign up for a meal plan?" modal=""></learn-item> 
</learn-card> 

が指令：

以下の例では、私は私が私のテンプレートコードの内部でブートストラップ4モーダルを追加する必要があり、問題がクリックされたときにコンテンツを変更することができますと仮定。それ以前のページにすべてのモーダルを追加するよりも簡単でしょうか？このディレクティブからHTMLをコンパイルし、他のディレクティブからHTMLを連結する必要がありますか？

angular.module('main').directive('learnCard', function($http, $compile){ 
return{ 

    compile: function(element, attrs){ 
     console.log(attrs); 
    }, 

    template: "<div class='col-sm-4'>"+ 
    "<div class='learn-card box-shadow'>" + 
     "<h3 class='text-center'>{{title}}</h2>" + 
     "<ul></ul>" + 
    "</div>" + 
    "</div>", 
    scope: { 
     title: '@title' 
    }, 
    link: function(scope, element, attrs){ 
      console.log(attrs); 
      element.compile.html(element); 
      element.bind(attrs.title, function(){ 
      }); 
    } 
} 
}); 

ここでは、親ディレクティブの中に個々の質問がすべてあります。これを単独で実行しても質問はされません。

angular.module('main').directive('learnItem', function(){ 
return{ 
    template: "<li data-toggle='modal' data-target='{{modalId}}'">{{question}}</li>", 
    scope: { 
     question: '@question' 
    }, 
    link: function(scope, element, attrs){ 
     alert('working'); 
     console.log($('learn-item')); 
    } 

} 
}); 

Answer 1

最初の問題は、（学ぶ-カード）を親タグに角度transcludeを持っています。これは指令にtransclude:trueを設定するのと同じくらい簡単でした。このプロパティを追加すると、親ノードにng-transclude属性を割り当てないようにすることができました。ユニークな属性に値を割り当てるときにブートストラップモーダルにファイルの内容を設定する

を「モーダル」の回避策：私の他のディレクティブ（学ぶ項目を）私はその後、私の第二の問題を解決することができたで

この問題は、Angular timeout関数を含む子ディレクティブ（learn-item）にコントローラを割り当てることでした。この関数の中で、私はHTTPメソッドの戻り値を割り当てました。残念ながら、最後の項目にスコープが設定されているため、コンパイル関数またはリンク関数を使用しても機能しません。つまり、すべてのモデルに同じ本文が含まれています。これは継承がscopeであるためです。 $timeoutを使用すると、すべての式の代わりに現在のオブジェクトにスコープが追加されました。

return{ 
    template:'<li><a href="" data-toggle="modal" data-target="#{{id}}"> {{question}}</a></li>' + modal, 
    scope: { 
      question: '@question', 
      id: '@dataid', 
      modal: '@modal', 
    }, 
    controller: ['$scope', function($scope){ 
     $timeout(function(){ 
      var modal = $scope.modal; 
      if (modal !== undefined){ 
       $http.get('/pages/faq/'+modal).then(function(response){ 
        $scope.data = response.data;      
       }); 
      } 

     }); 

    }] 

}