How to show value from controller in html element added with append() method?

Question

I'll appreciate any help. My problem: I can't show value from $scope.info in my view. I don't have direct access to html, so I can change DOM only via js. I created new element and added it to the DOM with append() method

$scope.info = {
  clicks: 15862,
  spent: '$124',
  created: '04/08/2017',
  author: 'John Kovalenko',
  name: 'Advertise US'
};

var info = document.createElement('div');
info = angular.element(info).attr({
  'ng-bind': 'info',
  'class': 'statistic-info'
});
angular.element(infoContainer).append(info[0]);

I created example here. http://jsfiddle.net/ADukg/13598/

What I'm doing wrong? Thank you

charlietfl · Accepted Answer · 2017-08-02 12:11:32Z

4

You have to use $compile when you manually inject anything that uses directives

  var info = angular.element('<div>').attr({
    'ng-bind': 'info.author',
    'class': 'statistic-info'
  });

  info = $compile(info)($scope);

  angular.element(infoContainer).append(info);

Be sure to inject $compile wherever you use it

DEMO

answered Aug 2, 2017 at 12:11

charlietfl

172k14 gold badges125 silver badges154 bronze badges

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

Comments

Brian · Accepted Answer · 2017-08-02 12:16:49Z

2

The simplest answer is to add the data into the HTML content before appending it. Since you have an object, I've supplied one of it's properties in the snippet below.

What is happening is your page loads, and the digest cycle has already completed. What you are appending is simply plain text, and therefor is not interpolated. This method that I am providing will not provide two-way binding. If that is required, you should be using a directive.

var infoTwo = '<div><p>' + $scope.info.clicks + '</p></div>';

That said, charlieftl has the best answer.

answered Aug 2, 2017 at 12:16

Brian

5,0693 gold badges22 silver badges30 bronze badges

Collectives™ on Stack Overflow

How to show value from controller in html element added with append() method?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related