Bind new html to controller after calling trustAsHtml Angularjs

Question

I'm able to embed the new html once received from the server but later I need to bind it to the model. Even when I compile it 5 seconds after it's inserted and displayed the html does not bind to the model.

Let me exemplify it briefly

function coolController($scope, $http, $log, $sce, $compile, $timeout){
$scope.message = {
        error: 'Kernel panic! :)',
        otherInfo: ''
    }

    $scope.form = $sce.trustAsHtml('<div></div>');

    $scope.Init = function(){
        $http({
            method: 'GET',
            url: helper.url('/form')
        }).
        success(function(data, status, headers, config) {
            $scope.form = $sce.trustAsHtml(data);
            $timeout(function(){
            $compile(angular.element('#elemThatContainsTheNewHTML'))($scope);
            }, 2500);

        }).
        error(function(data, status, headers, config) {
            $scope.message.error = data;            
        });
    }
}

Let's assume the html is

<div>
My cool error: {{ message.error }}
</div>

and the place where it's embedded should seem like:

<div ng-controller="coolController">
    <h4>Hello???</h4>

    <div ng-init="Init()">
      <span class="alert-error" ng-if="errorMessage.length > 0">{{errorMessage}}</span>
    </div>

    <div id="elemThatContainsTheNewHTML" class="viewContent" ng-bind-html="form">
    </div>
</div>

The html is embedded correctly but I want to bind it to the model.

angular.element does not support selector => angular.element('#elemThatContainsTheNewHTML') is not valid. You could try jQuery for this or just include jQuery on the page. — Khanh TO
– Khanh TO, Commented Mar 22, 2014 at 3:30

Community · Accepted Answer · 2017-05-23 12:16:21Z

2

Take a look at the answer to this related question, which describes using a directive to compile the template:

It's a bit tricky because ng-bind-html will simply insert plain old html and not bother compiling it (so any directives in the html will not be processed by angular.

Here's a demo, incorporating the suggested technique with your code.

edited May 23, 2017 at 12:16

CommunityBot

11 silver badge

answered Mar 22, 2014 at 4:21

j.wittwer

9,4973 gold badges32 silver badges32 bronze badges

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

Comments

Sagar Kanabar · Accepted Answer · 2014-03-22 04:53:45Z

I was same problem and i make angular directive which will rerender html content. The code of directive is as follows.

Directive:

app.directive('bindUnsafeHtml', ['$compile', function ($compile) {
      return function(scope, element, attrs) {
            console.log("in directive");
          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);
            }
        );
    };

}]);

HTML:

<div bind-unsafe-html="form">//your scope data variable which wil assign inn controller
</div>

Dont forgot to import directive where you config your angularJs project.Hope this will help you.

Collectives™ on Stack Overflow

Bind new html to controller after calling trustAsHtml Angularjs

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related