ajax html响应中的AngularJs数据绑定

Posted 2023-02-24

【中文标题】ajax html响应中的AngularJs数据绑定

【英文标题】：AngularJs data binding in ajax html response

【发布时间】：2014-10-21 12:09:47

【问题描述】：

我使用 python/django 作为具有复杂表单结构的后端。 我有一个角度控制器，它制作并要求获得合适的形式。我找到了一个 django-angular 包，它将“ng-model”属性添加到输入中。因此，我在服务器端使用表单呈现模板，并使用 html 提供响应。 Html 作为响应可能不是最佳实践，但它可以大大减少耗时。 所以我的问题是我得到带有表单的 HTML 响应和带有“ng-model”属性的输入，但是这个绑定不起作用。有没有办法做到这一点？ 这里只是这个 html 注入的一个示例： 控制器：

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

模板/视图：

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

【参考方案1】：

为您的 html 创建 @987654321@ 指令。

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>

DEMO

【讨论】：

谢谢，一切顺利，我已经忘记了这一点，我目前不时使用 Angular，并决定每天将其灌输到我的工作中。再次感谢！