Why does not work inserting HTML in Angular JS?

Question

I have HTML code:

<div dynamic="html"></div>

And Angular JS in AJAX response:

$scope.html = content;

My dirrective dynamic looks as:

.directive('dynamic', function ($compile) {
            return {
                restrict: 'A',
                replace: true,
                link: function (scope, ele, attrs) {
                    scope.$watch(attrs.dynamic, function(html) {
                        ele.html(html);
                        $compile(ele.contents())(scope);
                    });
                }
            };
        })

So, when I have $scope.html with HTML code in response then dynamic does not insert(prepend) this code in div block. Why?

Did you try the template? See the example under Template-extending directive — Eric Martinez
– Eric Martinez, Commented Jun 13, 2015 at 17:39

nalinc · Accepted Answer · 2015-06-13 19:06:58Z

1

...And Angular JS in AJAX response:

I cannot see any ajax call being made to get the template.

So, when I have $scope.html with HTML code in response then dynamic does not insert(prepend) this code in div block. Why?

You are not seeing any content because html, the callback response in $watch is undefined

From my understanding, I presume you want to have a directive attribute with value supplied as an html file where you could make an ajax request to.

<div dynamic="file.html"></div>

Further, in the link:{ ... } function of your attribute, you can make an ajax call to supplied template path, get its html as response data and insert/append that into the div block containing your directive.

 link: function (scope, ele, attrs) {
   $http.get('file.html').then(function(content){
     ele.html(content.data);
     $compile(ele.contents())(scope);
   })
 }

Here's the demo

answered Jun 13, 2015 at 19:06

nalinc

7,43327 silver badges34 bronze badges

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

1 Comment

Caur Over a year ago

Seems it that i need but instead file I have returned HTML block, that need insert to page

Jochen van Wylick · Accepted Answer · 2015-06-13 17:43:38Z

0

I would recommend you to use ngTransclude to do this.

That allows you to do something like:

<div yourdirective>
   <h1> Some custom HTML</h1>
</div>

Then if you're directive must include <ngTransclude></ngTransclude> which will then include the HTML that you put inside, into the directive.

Documentation here: https://docs.angularjs.org/api/ng/directive/ngTransclude

answered Jun 13, 2015 at 17:43

Jochen van Wylick

5,4015 gold badges46 silver badges66 bronze badges

2 Comments

Caur Over a year ago

How I can insert HTML from Ajax to this directive?

Jochen van Wylick Over a year ago

Sure - you can just use an {{expression}} in there AFAIK

Pankaj Parkar · Accepted Answer · 2015-06-14 08:46:40Z

0

Your code Working fine with proper binding of angular variable. See here the Plunkr which give you the Idea what you are missing in your code.

Update

As you want to replace directive element with your content you need to use ele.replaceWith that will replace the directive element.

Code

link: function(scope, ele, attrs) {
  var watcher = scope.$watch(attrs.dynamic, function(newhtml, oldhtml) {
    if(newhtml){
      ele.replaceWith($compile(newhtml)(scope));
      watcher(); //destructing watcher
    }
  });
}

Working Plunkr Here

edited Jun 14, 2015 at 8:46

answered Jun 13, 2015 at 17:40

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

10 Comments

Caur Over a year ago

Tried you solution, does not work foe me, not prepend HTML in block div. I get error also: $sce.trustedAsHtml

Pankaj Parkar Over a year ago

@Caur it appends see here but binding won't work plnkr.co/edit/rXBaMLoNDEBknDip6k1H?p=preview

Caur Over a year ago

No, i need re-compile HTM because there are directory in HTML

Pankaj Parkar Over a year ago

@Caur do you want it to prepent to your directive div?

Caur Over a year ago

Yes, I want that HTM will be insert to div and was compile

|

Collectives™ on Stack Overflow

Why does not work inserting HTML in Angular JS?

3 Answers 3

1 Comment

2 Comments

10 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

2 Comments

10 Comments

Your Answer

Sign up or log in

Post as a guest

Related