2015-02-06 103 views
1

我有一個自定義指令,它使用MathJax.js呈現帶有乳膠的字符串,下面是代碼。在自定義指令中轉義HTML

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>

也許我誤解的概念。我怎麼能解決這個問題?

回答

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>