How init controller in Ajax response?

Question

At main page there is initizlization ng-app and ng-controller:

<body ng-app="app">
<div ng-controller="MyController">
  <!-- Here is loaded HTML from AJAX response -->
</div>
</body>

Ajax response looks as:

<div>{{var}}</div>

So, this {{var}} shows like as text, I think because this HTML is not loaded together with all DOM page. How to fix?

If you modify anything out of angular context, you will have to invoke scope.$digest() — Samir Das, Apr 02 '15 at 09:42
The main controller `ng-controller="MyController"` does not see that HTML was loaded by ajax — Sahe, Apr 02 '15 at 09:44
My be need to re-init controller in ajax response, that it will see loaded `{{var}}`? — Sahe, Apr 02 '15 at 09:52
Add $scope.apply() after ajax call in success function. It might work. — Anita, Apr 02 '15 at 10:01
Why not use $http service for ajax request? Using jquery is also possible but you will have to use ng-include — Samir Das, Apr 02 '15 at 10:12

score 2 · Answer 1 · answered Apr 02 '15 at 12:19

Solution:

.directive('bindUnsafeHtml', ['$compile', function ($compile) {
        return function(scope, element, attrs) {
            scope.$watch(
                function(scope) {
                    // watch the 'bindUnsafeHtml' expression for changes
                    return scope.$eval(attrs.bindUnsafeHtml);
                },
                function(value) {
                    // when the 'bindUnsafeHtml' expression changes
                    // assign it into the current DOM
                    element.html(value);

                    // compile the new DOM and link it to the current
                    // scope.
                    // NOTE: we only compile .childNodes so that
                    // we don't get into infinite loop compiling ourselves
                    $compile(element.contents())(scope);
                }
            );
        };
    }])

Template:

<div bind-unsafe-html="templateForm"></div>

Ajax response:

request.success(function (data) {
  $scope.templateForm = data.html;
});

score 1 · Accepted Answer · edited May 23 '17 at 12:25

1

What you want to achieve is unfortunately not easy at all to do.

In this case you are on the boundary of AngularJS and Jquery.

You can do it like explained in this answer: https://stackoverflow.com/a/18157958/669561

But I would propose you to change your strategy and do the Ajax-Request directly with AngularJS $http-Service.

You could also include the HTML dynamically with AngularJS by using the ng-include-Directive

<body ng-app="app">
<div ng-controller="MyController">
    <ng-include src="your url with HTML content">
</div>
</body>

edited May 23 '17 at 12:25

Community

1
1

answered Apr 02 '15 at 10:00

DanEEStar

6,140
6
37
52

I have made AJAX via $http Angular, when I get HTML from with `ng-controller` in response this still does not work – Sahe Apr 02 '15 at 11:50
Also tried: `request.success(function (data) { $scope.templateForm = data.html; });` `` – Sahe Apr 02 '15 at 12:09

How init controller in Ajax response?

2 Answers2