функция jquery работает сначала, что DOM

Я работаю с AngularJs и у меня есть код в jQuery, что был бы должен работать как только был загружен DOM, но я понял с alert () что .ready он появлялся до того, как view был готов и поэтому код не мог работать, не дает ошибку просто не функционирует код

Мой код в jQuery

$('.form-control').on('focus blur', function (e) {
    $(this).parents('.form-group').toggleClass('focused', (e.type === 'focus' || this.value.length > 0));
}).trigger('blur');

Как мне может удаваться загрузить этот код однажды занеси в список view, но глобальной формы?, что смог присутствовать во всех view

2
задан 22.03.2016, 15:10
2 ответа

Я думаю, что ты фокусируешь mál проблему. Угловой состоит плохая практика в том, чтобы использовать DOMReady чтобы выполнять код, так как угловой у него есть его собственный цикл инициализации.

Угловой он инициализируется автоматически, когда событие DOMContentLoaded призывается, или когда заканчивают загружать рукописный шрифт angular.js в случае, что в этом моменте свойство document.readyState было равно в 'complete'

Помни, что угловым является SPA то есть как только framework берет контроль, оставшаяся часть совещаний загружена используя названные в ajax и вводя контент в специфических точках дерева DOM, из-за которого событие DOMReady он не будет работать больше.

В SPA все коды HTML, языка сценариев JavaScript, и CSS загружается разом или необходимые ресурсы загружаются dinámicamente, как этого потребовала страница, и присоединяются, обычно как ответ действий пользователя. Страница не должна грузить снова ни в какой точке процесса также переносится в другую страницу.

Чтобы бороться с этим ты можешь использовать директивные органы или услуги, чтобы герметизировать в корпусе твой код, и что этот работал для специфических элементов или в ответе на определенные действия пользователя. То, что у тебя есть, может быть повторно написанным, таким образом.

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);

И потом ты применяешь ее к нему к твоим таким элементам

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

Здесь у тебя есть 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>

Конечно это подразумевает, что ты должен добавлять этот директивный орган к каждому из элементов, поведение которых ты хочешь изменить, что на первый взгляд может казаться трудным, но это форма, о которой подумалась архитектура углового для того, чтобы твой код смог быть reusable, testeable, и т.д.

Это соединение (на английском) может объяснять тебе, что немного лучшей причины ты был бы должен располагать в порядке твой код этой формы http://ng-learn.org/2014/01/Dom-Manipulations/

1
ответ дан 24.11.2019, 14:42

Ты мог бы пытаться делать что-то как это и видеть, функционирует ли оно:

$('body').on('focus blur', '.form-control', function (e) {
    $(this).parents('.form-group').toggleClass('focused', (e.type === 'focus' || this.value.length > 0));
})

Как это у тебя есть $(selector).on(eventos, controlador), драйверы событий focus и blur только они будут ассоциироваться с элементами, которые уже будут существовать в DOM, когда будет работать команда; взамен, если ты делаешь $(elemento).on(eventos, selector, controlador) ты будешь создавать уполномоченные события, у которых есть преимущество, которого да они обрабатывают события элементов, которые выполняют селектор и которые добавляются, выполнив эту команду (шрифт).

0
ответ дан 24.11.2019, 14:42