javascript - 在自定义指令上转义 HTML

Question

我有一个自定义指令，可以使用 MathJax.js 用 latex 渲染字符串，这是代码。

MathJax.Hub.Config({
    skipStartupTypeset: true,
    tex2jax: {
      inlineMath: [['$','$'], ['\\(','\\)']],
      processEscapes: true
    }
});
MathJax.Hub.Configured();

angular.module('mathjaxModule', [])

.directive("mathjaxBind", function() {
    return {
        restrict: "A",
        controller: ["$scope", "$element", "$attrs", function($scope, $element, $attrs) {
            $scope.$watch($attrs.mathjaxBind, function(value) {
                $element.text(value == undefined ? "" : value);
                MathJax.Hub.Queue(["Typeset", MathJax.Hub, $element[0]]);
            });
        }]
    };
});

你可以像这样使用它: <span mathjax-bind="textToRender"></span>

这个指令非常方便，因为我可以将文本与 MathJax 表达式组合起来，只要数学表达式在 $$ 范围内。 ，一切都呈现良好。使用 MathJax 将文本作为文本和数学表达式。

问题是其中一些字符串还包含 HTML，我似乎无法使用 ng-bind-html当我使用自定义指令时。

我尝试了类似的方法但没有成功:

<span mathjax-bind="textToRender" ng-bind-html="textToRender"></span>

也许我误解了这个概念。我该如何解决这个问题？

Answer 1

我有同样的需求，我从这里找到了答案:http://blog.datacamp.com/mathjax-binding-in-angular-js/

这是我的代码:

.directive('mathjax',function(){
  return {
    restrict: 'A',
    link: function($scope, $element, $attrs) {
      $scope.$watch($attrs.ngBindHtml, function () {
        MathJax.Hub.Queue(['Typeset',MathJax.Hub,$element[0]]);
      });
    }
  };
});

然后像这样使用它:<span ng-bind-html="textToRender" mathjax></span>