AngularJs 在 Ajax HTML 响应中的数据绑定

Question

我正在使用Python和Django作为后端，处理复杂的表单结构。
我有一个Angular控制器，它会发起请求来获取合适的表单。我找到一个django-angular的包，可以给输入框添加'ng-model'属性。这样我就在服务器端渲染一个包含表单的模板，并返回HTML作为响应。虽然直接返回HTML可能不是最佳做法，但这样做省时省力。

所以我遇到的问题是，我得到了包含'ng-model'属性的表单和输入框的HTML响应，但这个绑定就是不管用。有没有办法解决这个问题呢？以下是这个HTML注入的一个示例：

控制器：

$scope.form = $sce.trustAsHtml(data.HTML);

模板/视图：

<div ng-bind-html="form"></div>

Answer 1

创建一个指令来使用 $compile 来处理你的 HTML。

angular.module("app").directive('compilehtml', ["$compile", "$parse", function($compile, $parse) {
    return {
        restrict: 'A',
        link: function($scope, element, attr) {
            var parse = $parse(attr.ngBindHtml);
            function value() { return (parse($scope) || '').toString(); }

            $scope.$watch(value, function() {
                $compile(element, null, -9999)($scope); 
            });
        }
    }
}]);   

然后添加这个指令

<div ng-bind-html="form" compilehtml></div>

示例