jquery - 如何使用 AngularJS 绑定(bind)通过 jquery 动态添加的字段

Question

所以，我有一个表单，其中包含使用 jQuery 动态添加的字段，该字段具有 ng-model，但它们不是由 AngularJS 编译的。我如何绑定(bind)/编译这些字段？

示例:http://jsfiddle.net/J48fA/1/

[edit1] ps:我在 RailsApp 上使用复杂的 cocoon 插入字段。我正在使用 AngularJS 来显示一个包含许多有关字段的信息的表格，因此，我尝试在不接触 Rails 代码的情况下使用它。

Answer 1

我同意之前的所有评论。最佳实践是使用指令进行任何 DOM 操作。话虽这么说，如果您想在 Controller 内完成您想要做的事情，这就是您完成任务的方式。

您需要将 $compile 服务传递到您的 Controller 中，然后添加我添加的几行代码:

testapp.controller('parentController', ['$scope', '$window', '$compile', function($scope, $window, $compile) {

    var $elementToAppend = $('<input ng-model="fields[1].value" type="text" value="">');
    $compile($elementToAppend)($scope);
    $('#field-1').append($elementToAppend);
    $scope.fields = {};
    fields = $scope.fields;

    $scope.buildField = function (id){
        $scope.fields[id] = {'value' : null};
    };
}]);