There is a fairly common task that AngularJS can easily cope with, as I thought and probably still think.

There is a latex string that is displayed in my own directive.

<latex>{{ task.taskMessage }}</latex>

Apparently, the directive is processed before the execution of the expression, so I have:

 .directive("latex", function () { return { restrict: 'E', link: function (scope, element, attrs) { console.log(element[0].textContent); // '{{ task.taskMessage }}' // katex.render(element[0].textContent, element[0]); } }; })

I climbed on forums and blogs, there are similar issues resolved via data-content, $ watcher, and, not knowing it, with the help of ng-bind-html. So how is it all the same to organize exactly my version?

  • If you need to get the value of task.taskMessage in a directive, then you can hang $ watch or $ timeout and get it in them. Or output {{task.taskMessage}} through another directive priority, which will be higher. PS I am not very strong in an angulara, but I think it might work. - whispeer
  • @ Alexey Danchin, can you write what you need to do? If you need to output complex html-code through a variable, then look at [this question] [1]. [1]: hashcode.ru/questions/362250 - MasterAlex
  • @MasterAlex, first the expression should work and insert the text, which is the latex encoding of the mathematical expression, and after the latex directive should render this text into the correct mathematical formula like in books. - Alexey Danchin
  • katex rendrit text in html markup with their own styles. - Alexey Danchin

1 answer 1

Everything was decided easily. Thanks to @whispeer and @MasterAlex for the help. My working solution:

 .directive("latex", ['$timeout', function ($timeout) { return { restrict: 'E', link: function (scope, element, attrs) { $timeout(function () { katex.render(element[0].textContent, element[0]); }); } }; }])

It works, because $timeout works only after the first expression of the traversal.