AngularJS: późne wiązanie modelu ng do elementu domowego

Question

Mam stronę internetową z elementami HTML, których nie mogę edytować. Chciałbym dynamicznie dołączyć atrybuty ng-model do tych i AngularJS ponownie związać je z zakresem. Uproszczony przykład tego, co chcę osiągnąć można znaleźć 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

Trzeba użyć $compile (docs)

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

demo

Po załadowaniu strony, kanciaste zastosowań $compile na HTML automatycznie, w ten sposób wie, jakie elementy przypisać do których dyrektyw. Jeśli zmienisz atrybut tak, jak wypróbowałeś, kątowy nie wie. Musisz użyć $compile.