Angular 1 refresh $document after change data in ng-bind-html

Question

I would like to paste some additionals HTML data into HTML element. So I have used an ng-bind-html method, moreover I used "trustAsHtml". Everything works fine. The HTML structure are display. The problem starts when I want to get an element from generated structure. There is an element with id "specyfication". That is why I have tried to get it using command placed bellow, but i receive null.

$document[0].getElementById('specyfication')

The problem has gone when this operation is initialized from some button but I need it without any extra clicks and so one.

I thought that there have to be some option to refresh "$document" and I could do it after data in the ng-bind-html has changed.

Could you give me some tip.

Answer 1

the problem is that you are trying to find an element before the ng-bind-html directive has finish inserting everything, the ng-bind-html directive has the highest priority lever that Angularjs provide, so if you run a custom directive after, you will be 100% guarantee that the second directive will have the html available.

This question resolves the issue using a directive and searching the element inside if it

The directive would look something like this:

.directive('modifySpecification', [
    function () {
        return {
            replace: false,
            scope: {
                'ngModel': '='
            },
            link: function (scope, element) {
                element.html(scope.ngModel);
                var items = element[0].querySelectorAll('#specyfication');
                // do something
            }
        };
    }
]);

Controller example:

 app.controller('Ctrl', function($scope) {
        .then(function(response) {
          $scope.myHTML = '<div> <span id="specyfication"></span> </div>';
    }); 

And then add the directive on your template:

<div ng-bind-html="myHTML" modify-specification></div>