CODEWITHSUNDEEP
angularjs
Sahe
Sahe

Reputation: 163

How init controller in Ajax response?

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?

Upvotes: 0

Views: 1090

Answers (2)

Sahe
Sahe

Reputation: 163

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;
});

Upvotes: 2

DanEEStar
DanEEStar

Reputation: 6280

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>

Upvotes: 1

Related Questions