AngularJS：将ng-model后期绑定到dom元素

Question

我有一个包含一些HTML元素的网页，但这些元素我无法编辑。我想动态地将ng-model属性附加到这些元素上，并让AngularJS重新绑定它们到作用域。这里可以找到我想要实现的简化示例。

<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>

- matteo

Answer 1

你需要使用$compile (文档)。

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

演示

当您加载页面时，Angular会自动将HTML编译为$compile，这就是它知道要将哪些指令分配给哪些元素的方式。如果您只是尝试更改属性，那么Angular不会知道。您必须使用$compile。

- Mosho

---

抱歉，我没有足够的声望点来接受你的答案；当我有足够的声望点时，我会回来看看它！ - matteo

谢谢Mosho。这里是如何将ng-model进行后期绑定到select的代码片段：<select id="timezone"></select> $compile(angular.element('#timezone'), angular.element('#timezone').attr('ng-model', 'vm.timeZone'))($scope); - yaru