Manually add scope to html element via JS Ctrl

Question

I want to create a new element in my controller and then add a scope variable to this. The way I did it, I only see '{{text}}' in the view instead of the variable value of $scope.text.

That's my code so far:

JS:

var elem = document.getElementById('match-text');
var newElem = document.createElement('span');
newElem.setAttribute('id', 'inner-match-text');
newElem.setAttribute('class', 'ng-binding');
newElem.innerText = '{{text}}';
elem.appendChild(new_elem);

Html:

<h3 id="match-text"></h3>

Maybe this is the totally wrong approach, I don't know. Can someone tell me how to do this properly?

Douglas Tyler Gordon · Accepted Answer · 2017-05-22 20:34:40Z

1

Is it necessary to use quotes?

newElem.innerText = $scope.text;

edited May 22, 2017 at 20:34

answered May 22, 2017 at 20:29

Douglas Tyler Gordon

5543 silver badges10 bronze badges

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

4 Comments

threxx Over a year ago

Now I just see this '${$scope.text}', so does not work either

Douglas Tyler Gordon Over a year ago

are you using backticks or regular single quotes? you need to use backticks: `

threxx Over a year ago

when I use backticks, I get the error message 'string templates are not supported by current js version'

Douglas Tyler Gordon Over a year ago

So I guess you're using something lower than ES6? What about not using any quotes at all? I've changed my answer.

Collectives™ on Stack Overflow

Manually add scope to html element via JS Ctrl

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related