Skip to main content
2 de 2
traducido fragmento de la bibliografía a español
devconcept
  • 12.8k
  • 3
  • 42
  • 57

Creo que estas enfocando mál el problema. En angular es una mala práctica usar DOMReady para ejecutar código ya que angular tiene su propio ciclo de inicialización.

Angular se inicializa automáticamente al invocarse el evento DOMContentLoaded o cuando se termina de cargar el script angular.js en caso que en ese momento la propiedad document.readyState sea igual a 'complete'

Recuerda que angular es un SPA o sea que una vez que el framework toma el control el resto de las vistas son cargadas usando llamadas a ajax e insertando el contenido en puntos específicos del árbol del DOM por lo que el evento DOMReady no se ejecutará más.

En un SPA todos los códigos de HTML, JavaScript, y CSS se carga de una vez o los recursos necesarios se cargan dinámicamente como lo requiera la página y se van agregando, normalmente como respuesta de los acciones del usuario. La página no tiene que cargar otra vez en ningún punto del proceso tampoco se transfiere a otra página.

Para lidiar con esto puedes usar directivas o servicios para encapsular tu código y que este se ejecute para elementos específicos o en respuesta a determinadas acciones del usuario. Lo que tienes puede ser reescrito de esta forma.

function focusBlur() {
    return {
        restrict: 'A',
        link: function($scope, $element) {
            $element.on('focus blur', function (e) {
                $element.parents('.form-group').toggleClass('focused', (e.type === 'focus' || this.value.length > 0));
            });
            $element.trigger('blur');
        }
    };
}

focusBlur.$inject = [];

angular.module('app')
    .directive('focusBlur', focusBlur);

Y luego se la aplicas a tus elementos así

<input focus-blur id="sample" name="sample" class="form-control" value="4">

Aquí tienes un demo

function focusBlur() {
  return {
    restrict: 'A',
    link: function($scope, $element) {
      $element.on('focus blur', function(e) {
        $element.parents('.form-group').toggleClass('focused', (e.type === 'focus' || this.value.length > 0));
      });
      $element.trigger('blur');
    }
  };
}

focusBlur.$inject = [];

angular.module('app', [])
  .directive('focusBlur', focusBlur);
.form-group.focused {
  box-shadow: inset 0 0 2em gold;
  webkit-box-shadow: inset 0 0 1em gold;
  moz-box-shadow: inset 0 0 1em gold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

<div ng-app="app">
  <div class="form-horizontal">
    <div class="form-group">
      <label class="control-label col-md-3">Nombre</label>
      <div class="col-md-9">
        <input focus-blur id="nombre" name="nombre" class="form-control" value="Jose">
      </div>
    </div>
    <div class="form-group">
      <label class="control-label col-md-3">Apellidos</label>
      <div class="col-md-9">
        <input focus-blur id="apellidos" name="apellidos" class="form-control" value="">
      </div>
    </div>
    <div class="form-group">
      <label class="control-label col-md-3">Edad</label>
      <div class="col-md-9">
        <input focus-blur id="edad" name="edad" class="form-control" value="25">
      </div>
    </div>
  </div>
</div>

Por supuesto esto implica que tienes que agregar esta directiva a cada uno de los elementos cuyo comportamiento deseas modificar lo cual a primera vista puede parecer trabajoso pero esta es la forma en la que está pensada la arquitectura del angular para que tu código pueda ser reusable, testeable, etc.

Este link (en inglés) te puede explicar un poco mejor el porqué deberías estructurar tu código de esa forma http://ng-learn.org/2014/01/Dom-Manipulations/

devconcept
  • 12.8k
  • 3
  • 42
  • 57