AngularJs数据AJAX HTML响应结合 [英] AngularJs data binding in ajax html response

问题描述

我使用python / Django的作为后端aplication复杂的结构形式。
我得到了一个角的控制器，这使得并要求获得适当的形式。我发现了一个Django的角包，增加了NG-模式属性来输入。所以我呈现模板与服务器端的形式，并提供响应的HTML。 HTML作为响应可能不是最好的做法，但它使事情少了很多耗时。

所以我的问题是，我得到表单和输入与NG-模式属性HTML的响应，但这种结合只是doen't工作。有没有一种方法来实现这一目标？ 下面是这个HTML注入的只是一个样本：

控制器：

  $ scope.form = $ sce.trustAsHtml（data.HTML）;
 

模板/视图：

 ＆LT; D​​IV NG绑定，HTML =形与GT;＆LT; / DIV＆GT;
 

解决方案

创建指令的 $编译 你的HTML。

  angular.module（APP）。指令（compilehtml'，[$编译，$解析功能（$编译，$分析）{
    返回 {
        限制：'A'，
        链接：函数（$范围，元素，属性）{
            VAR解析= $解析（attr.ngBindHtml）;
            函数值（）{回报（解析（$范围）||''）的ToString（）; }

            $范围。$手表（价值函数（）{
                $编译（元素，空，-9999）（$范围）;
            }）;
        }
    }
}]）;
 

然后添加此指令

 ＆LT; D​​IV NG绑定，HTML =形式compilehtml＆GT;＆LT; / DIV＆GT;
 

演示

I'm using python/django as an backend aplication with complex forms structure.
I got an angular controller which makes and request to get suitable form. I found an django-angular package that adds 'ng-model' attribute to inputs. So I'm rendering template with form on server side, and provide response with html. Html as a response is probably not best practise, but it make things a lot less time consuming.

So my issue is that i get html response with form and input with 'ng-model' attributes, but this binding just doen't work. Is there a way to accomplish that? Here is just a sample of this html injection:

controller:

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

template/view:

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

解决方案

Create directive to $compile your 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); 
            });
        }
    }
}]);   

Then add this directive

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

DEMO

这篇关于AngularJs数据AJAX HTML响应结合的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！