AngularJs data binding in ajax html response

Question

I'm using python/django as a backend with complex forms structure.
I got an angular controller which makes and request to get a suitable form. I found a django-angular package that adds 'ng-model' attribute to inputs. So I'm rendering a template with the form on the server side, and provide a response with HTML. Html as a response is probably not best practice, but it makes 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 doesn'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>

Darshan P · Accepted Answer · 2014-08-27 19:46:35Z

4

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

edited Aug 27, 2014 at 19:46

answered Aug 27, 2014 at 19:40

Darshan P

2,24119 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

mdargacz Over a year ago

Thanks, that went smooth, i have forgotten about this, and I'm currently using angular from time to time, and decided to inculcating it to my work on daily basis. Thanks again!

Collectives™ on Stack Overflow

AngularJs data binding in ajax html response

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related