0

Tengo un pequeño error en uno de mis scripts trabajando con el dom y angular

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <title>Welcome to LearnKode - A code learning platform</title>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
</head>

<body ng-app="app">
  <div ng-controller="elementController">
    <div id="testDiv">
      <p>error de angular</p>
      <p>{{name}}</p>
      <p>error de angular</p>
    </div>

  </div>
</body>

</html>
<script>
  var app = angular.module("app", []);
  app.controller('elementController', ['$scope', '$document',
    function($scope, $document) {
      $scope.name = "LearnKode";
      var element = angular.element($document[0].querySelector('#testDiv'))
      element.append("<h2>Append</h2>");
      element.prepend("<h2>Prepend</h2>");
    }
  ]);
</script>

Observen los tres elementos <p> del html donde pongo "error de angular". No me compila la variable name por encontrarse dentro de las etiquetas que manipulo con angular, sin embargo si saco fuera del div el 'p' del medio donde dice 'name', entonces si me funciona, me parece una cosa extraña, no?. Observen incluso que el primer 'p' no lo ejecuta. ¿no les parece raro señores de angular?

2 respuestas 2

2

El problema que tienes es que el ciclo $digest esta ejecutandose cuando tratas de modificar el dom, por ende cuando termina no sabe que tenia cosas pendientes por ejecutar.

La solución es usando un setTimeout o si usas lodash _.defer() el código quedaría así:

var app = angular.module("app", []);
app.controller('elementController', ['$scope', '$document', function ($scope, $document) {
    $scope.name = "LearnKode";
    var element = angular.element($document[0].querySelector('#testDiv'))

    setTimeout(function() {
      $scope.$apply(function(){

        element.append("<h2>Append</h2>");
        element.prepend("<h2>Prepend</h2>");
      }); //this triggers a $digest
    }, 1);
}]);

Te dejo este enlace con el código funcionando. Adiconalmente te dejo este tutorial sobre el $digest

2
  • Buena respuesta. Quiero agregar que poner un setTimeout en 1 es lo mismo que escribirlo sin especificarle tiempo ya que se ejecutará con un retardo de 4ms o de 10ms. De todas formas el navegador lo ejecutará en el mínimo posible.
    – devconcept
    Commented el 22 abr. 2016 a las 16:48
  • @devconcept Correcto, ya lo edito.
    – Wilfredo
    Commented el 22 abr. 2016 a las 16:52
0

A parte del error que recibes, que parece que se resuelve con la solución que ya te han dado en la respuesta de @Wilfredo, es una mala práctica modificar el DOM desde un controlador. Para esto están las directivas [1][2].

En mi opinión, deberías modificar tu código creando una directiva y modificando el DOM desde ella.

[1] https://docs.angularjs.org/guide/directive

[2] https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md#manipulate-dom-in-a-directive

Tu Respuesta

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

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