Angularjs ng-model did not working on my mathjax-bind

Question

I have input(s) text inside a string and need to convert if found any characters like ## to <input type="text" />. I have no problems to return the value if I used ng-bind-html. However, ng-model value did not return using mathjax-bind.

How to solve this issue? Thanks.

HTML codes:

<script type="text/x-mathjax-config"> MathJax.Hub.Config({   tex2jax: {inlineMath: [['`','`'], ['\\(','\\)']]} }); </script>

<div ng-controller="MyCtrl">
\(-3\times 4=\)

<br/>
<br/>
<br/>

  <div mathjax-bind="output">
  </div>
  <br/>
  <button ng-click="check_answer()">
  Check Answer
  </button>
</div>

Controller:

var myApp = angular.module('myApp',[]);

myApp.directive("mathjaxBind", function() {
        return {
            restrict: "A",
            controller: ["$scope", "$element", "$attrs",
                function($scope, $element, $attrs) {
                    $scope.$watch($attrs.mathjaxBind, function(texExpression) {
                        $element.html(texExpression);
                        MathJax.Hub.Queue(["Typeset", MathJax.Hub, $element[0]]);
                    });
                }]
        };
    });

//myApp.directive('myDirective', function() {});
//myApp.factory('myService', function() {});

function MyCtrl($scope) {
     $scope.form = {};
    var output = 'Answer: <br/> ##';
    $scope.output = output.replace('##','<input type="text" ng-model="form.data.input1" />');

    $scope.check_answer = function()
    {
        alert($scope.form.data.input1);
    }
}

Mathjax-bind with angularjs model fiddle

score 0 · Answer 1 · answered Dec 08 '16 at 20:12

I got the solution. I just need to compile again...the code:

myApp.directive("mathjaxBind", function($compile) {
        return {
            restrict: "A",
            controller: ["$scope", "$element", "$attrs",
                function($scope, $element, $attrs) {
                    $scope.$watch($attrs.mathjaxBind, function(texExpression) {
                        $element.html(texExpression);
                        $compile($element.html(texExpression).contents())($scope);
                        MathJax.Hub.Queue(["Typeset", MathJax.Hub, $element[0]]);
                    });
                }]
        };
    });

Here's the working fiddle.

Angularjs ng-model did not working on my mathjax-bind

1 Answers1