追加されたHtmlコードの角形モデルが機能しない

Question

これは私のコードです。私は動的にボタンをクリックしてhtmlを追加する。しかし、私がそこに与えたngモデルは動作していない。

誰もが、私はそれが動作しないだろうと思い、私の問題

$scope.addParam = function(selected) { 
    if (selected == "bucket_policy_privacy_status") { 
    var myElement = angular.element(document.querySelector('#inputParameters')); 
    myElement.append('<input type="text" style="width:220px" class="form-control" name="" disabled="" value=' + selected + '> <select class="form-control" style="width:196px" ng-model="fields.privacyStatus" ><option value="range">Range</option><option value="public">Public</option><option value="private">Private</option></select> <br><br>'); 
     $scope.$watch('fields.privacyStatus', function() { 
     var privacy_status = $scope.fields.privacyStatus; 
     alert(); 
     var status = { 
      "term": {} 
     } 
     status.term[selected] = privacy_status; 
     output.push(status); 
     }); 
    $('#params option[value="bucket_policy_privacy_status"]').remove(); 
    $scope.input.select = "bucket_owner"; 
    } 
}; 

Answer 1

を変更する必要がありますがいくつかあります：

あなたは動的にHTMLを挿入するとき、角の属性/式を評価するAngulars $compileオプションを使用する必要があります。あなたは要素がDOMはトリックを行う必要がありotの追加後に以下の行を追加し

：

$compile(angular.element('.form-control'))($scope);

それは基本的にただの角度は、それが評価し、見始めるべきで、何か新しいものがある知っています。

（モジュールの依存関係に$ compileを追加することを忘れないでください）。

さらに、$scopeにfieldsというオブジェクトを実際に追加したとしますか？

もう1つのことは、$ watchを使用する代わりにフォームでng-changeを使用することです。 ng-changeでバインドする関数は、フォーム内の選択項目の1つが変更されるたびに呼び出されます。あなたがコードを、あなたの期待が何であるかを台無しにしている https://docs.angularjs.org/api/ng/service/ $

Answer 2

を解決することができ、あなただけのDOMを追加している、それがすべてだ、何のバインドはありません。 これを行うディレクティブを作成する方法と、「ng-hidden」のテンプレートにその入力を追加する方法があります。