動的に追加されたhtmlでng-show/hideが動作しない

Question

ダイナミックHTMLを追加することは可能ですか（下のように）、ng-show/hideは正しく動作しますか？

私は交換したいプロットと、.show（）/。hide（）を適切に見つけることができます。

背景： 私は動的にハイチャートを使ってページにプロットを追加して、HTML ID 'space-for-HC'にします。私は、体重の有無にかかわらず、成績を示しています。私は（「NG-モデル= '加重）のチェックボックスを使用して、これらのプロットを交換したい

JS：。

$scope.plot_it_all = function(response) { 
    let schools = Object.keys(response.data); 
    schools.forEach(function(school){ 
     angular.element(document.getElementById('space-for-HC')).append(

'<div>' + 
' <div class="ng-scope" ng-hide="Weighted" id="HC-container-grades-' + school + '" style="min-width: 600px; max-width: 800px; height: 400px; margin: 0 auto"></div>' + 
' <div class="ng-scope" ng-show="Weighted" id="HC-container-grades-weighted' + school + '" style="min-width: 600px; max-width: 800px; height: 400px; margin: 0 auto"></div>' + 
'</div>' 

     ); 
     $scope.plot_school(school, response); 
    }); 
}; 

は免責事項：これは、DOM操作のこの種の私の最初の角のアプリ

Answer 1

である必要がありますディレクティブで行われる。uはあなたが `$のcompile`を使用する必要があり、角コンパイルサービス$compile