AngularJS: späte Bindung von ng-Modell an dom-Element

Question

Ich habe eine Webseite mit einigen HTML-Elementen, die ich nicht bearbeiten kann. Ich möchte dynamisch ng-Modell-Attribute an diese anhängen und AngularJS binden sie an den Geltungsbereich. Ein vereinfachtes Beispiel dafür, was ich will, kann erreichen here

<script src="//code.jquery.com/jquery-2.1.0.min.js"></script> 
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"></script> 
<script> 
function MyCtrl($scope) { 
    $scope.myModel1 = "Hi"; 
    $scope.myModel2 = "there"; 
    var myModel2 = angular.element("#myModel2"); 
    //This won't work 
    myModel2.attr("ng-model", "myModel2"); 
} 
</script> 
<div ng-app ng-controller="MyCtrl"> 
    <input type="text" ng-model="myModel1"/> 
    <!-- I can't touch this --> 
    <input type="text" id="myModel2" /> 
</div> 

Answer 1

Sie verwenden müssen $compile (docs)

$compile(myModel2.attr("ng-model", "myModel2"))($scope); 

demo

Wenn Sie laden Sie Ihre Seite, Winkel Anwendungen $compile gefunden werden das HTML automatisch, so weiß es, welchen Elementen welche Direktiven zugewiesen werden sollen. Wenn Sie nur das Attribut ändern, wie Sie es versucht haben, weiß eckig nicht. Sie müssen $compile verwenden.