0

estoy haciendo un pequeño ejercicio front end con angularjs. Es para realizar una ecuación de 2do grado mediante la fórmula de bhaskara. Cree una webapi con c# que devuelve las raíces x1 y x2, y para printear el resultado visual en html agregue la librería MathJax.

Hago la petición ajax y en el success mando el código formateado para q MathJax lo muestre como ecuación. Lo que sucede es que se hace el innerHtml y queda a la vista el string sin formato ecuación , asumo que es porque no se recarga la página html. ( ya que coloque una pequeña ecuación a modo de prueba al inicio de la pag y esa si carga cuando se despliegua el dom).

Hay algún método para yo poder recargar los elementos puntualmente?? O debería colocar los input en un form y que se recargue la pag entera luego del submit?? (actualmente voy desde un botón a una función del controler mediante ngclick de angular)


No conocía esa directiva de angular ( recien estoy comenzando con el framework.

Te comparto el codigo de mi llamada ajax como me pediste

var app = angular.module("app", []); app.controller("bhaskaraCtrl", ["$scope","$http",($scope, $http) => {

$scope.params ={};    
$scope.salida = {} ;

$scope.goToApi = () =>{  
  $http({
    method: "GET",
    url: "http://localhost:63603/api/bhaskara/",
    headers: {'Accept' : 'application/json'},
    params: { 'a': $scope.params.a,
              'b': $scope.params.b,
              'c': $scope.params.c }
  })
    .then((data) => {
      console.log(data);

      $scope.salida.ecuacion = `${$scope.params.a}x² + ${$scope.params.b}x + ${$scope.params.c} = 0`;

      let resulDeterminante = (($scope.params.a * $scope.params.a) -4 * $scope.params.a * $scope.params.c);
      $scope.salida.determinante = ` ∆ = ${$scope.params.a}² - 4 * ${$scope.params.a} * ${$scope.params.c} = ${resulDeterminante}`;

      $scope.salida.x1 = `$$x1 = {-${$scope.params.b} - \sqrt{${resulDeterminante}} \over 2*${$scope.params.a}}.$$`;
      $scope.salida.x2 = `$$x2 = {-${$scope.params.b} + \sqrt{${resulDeterminante}} \over 2*${$scope.params.a}}.$$`;

    },(err) => {
      console.log(err);
      $scope.msj = err;
    });
};

}]);

y en HTML

      <span> {{salida.msj}} </span><br/><br/>
      <span> {{salida.ecuacion}} </span><br/><br/>
      <span> {{salida.determinante}} </span><br/><br/>
      <span> {{salida.x1}} </span><br/><br/>
      <span> {{salida.x2}} </span><br/><br/>
5
  • podrias poner el codigo de como realizas la llamda ajax ? mas que nada para ver la implementacion del success el 19 sep. 2019 a las 11:06
  • si usas angular no aplica ningun innerHtml, se supone que pongas el dato en una variable y la accedas desde el html por medio del $scope el 19 sep. 2019 a las 11:06
  • ¿Cual es el error exactamente? ¿No visualizas correctamente tus datos? No aparece algùn error en la consola de depuracion de navegador?
    – cjara
    el 20 sep. 2019 a las 14:11
  • Sucede que MathJax solo muestra las ecuaciones en formato "bonito" cuando carga el HTML con el script. Y al generarse los strings LaTeX mediante una peticion ajax, se incrusta el string por el binding de angular pero no se recarga el DOM, por lo que quedan alli en formato LaTeX horriblemente feo. Necesitaria o recargar el div, o utilizar esta directiva que me paso el compa Tuttini
    – smanzoni
    el 20 sep. 2019 a las 14:15
  • La directiva no pude lograr hacerla funcionar. La misma consta del codigo de la directiva en sí ( que me tira error por consola, no reconoce Queue ( utiliza una cola en cierta parte de su codigo ) ), y tampoco reconoce los objetos MathJax de una configuración aparte que debe de colocarse al principio del js ( este MathJax es un objeto ). No por donde entrarle la verdad
    – smanzoni
    el 20 sep. 2019 a las 14:28

1 respuesta 1

0

Creo que deberias ver de aplicar una directiva

AngularJS: MathJax Binding

analiza el ejemplo de miensol, veras que la directiva permite bindear la variable del scope

module.controller('MainCtrl', function($scope){
  $scope.equation = "formula";
 });

con el html

<div ng-app="test" ng-controller="MainCtrl">
  <textarea ng-model="equation"></textarea>
  <p math-jax-bind="equation"></p>
</div>

en tu caso cuando realices el $http para la llamada a la webapi el valor que retorne lo asignas a esa variable del scope para que se refleje en la formula

Hay otras implementacion que aplican un watcher sobre la variable del scope para aplicar la formula

AngularJS-MathJax-Directive

en este caso la directiva esta en un modulo que podrias usar, o sino copiar la directiva a tu modulo que ya tengas

1
  • No pude hacerlo funcionar... La directiva la creo ( copio y pego la que proponen ), pero las otras lineas de configuración de MathJax me dan error por consola, diciendo que el objeto no esta declarado. IDK
    – smanzoni
    el 19 sep. 2019 a las 15:55

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.