JQuery и AngularJS: привязать события к изменению DOM

В моей DOM в AngularJS я использую ng-include внутри директивы ng-repeat. Это очень просто загружает HTML. Во всяком случае, проблема заключается в том, что я использую JQuery (последняя версия) для привязки нескольких событий мыши и мыши к элементам в DOM с тем же классом, что и в DOM с помощью ng-repeat и include. Однако JQuery не применяет обработчики событий к новому дополнению DOM.

В предыдущих версиях .live(), казалось, делал то, что я хочу, но был удален в последней версии. Должен ли я очищать привязки элементов и создавать их каждый раз, когда DOM содержит дополнительные элементы добавленного класса?

Ответ 1

Ответ здесь:

Это многогранный вопрос. Прежде всего, все события кода jQuery должны использовать $scope. $Apply для выполнения кода angularjs, как и ожидалось. Пример:

jQuery(selector).someEvent(function(){
    $scope.$apply(function(){
      // perform any model changes or method invocations here on angular app.
    });
});

В последней версии jQuery, чтобы иметь события, которые обновляются на основе изменений DOM, вы хотите: 1. Получить селектор для ближайшего родительского элемента (ex):

<div class="myDiv">
<div class="myDynamicDiv">
</div>
<!-- Expect that more "myDynamicDiv" will be added here -->
</div>

В этом случае ваш родительский селектор будет ".myDiv", а ваш дочерний селектор будет .myDynamicDiv.

Таким образом, вы хотите, чтобы jQuery имел события в PARENT элемента, поэтому, если дочерние элементы меняются, он все равно будет работать:

$('.myDiv').on("click", ".myDynamicDiv", function(e){
      $(this).slideToggle(500);
      $scope.$apply(function(){
           $scope.myAngularVariable = !$scope.myAngularVariable;
      });
});

Обратите внимание, что $scope. $apply() используется для включения jQuery для доступа к этим переменным angular.

Надеюсь, это поможет! Christian

Ответ 2

Отказ от ответственности: я сам изучал angular, поэтому это в основном только полуобразованные догадки.

Сначала рассмотрим использование директив angular для задания, как указано Бертрандом и Марком.

Во-вторых, убедитесь, что jquery загружается до angular, см. здесь.

В-третьих, это может быть проблема с динамической связью, см. здесь.

Пожалуйста, обратная связь.

Ответ 3

Этот вопрос уже хорошо ответил Кристиан Стюарт, но я просто хотел добавить что-то к его ответу.

Я использую следующий код и добавляю класс "cssClickableIcon" к своим кнопкам, так что, когда пользователь нажимает кнопку (или элемент управления div), он слегка сжимается внутрь.

Он немного подстраивается, но имеет действительно приятный эффект на веб-странице. Вы действительно чувствуете, что веб-страница более интерактивна, а не плоская, и что вы нажали на элемент управления.

//  Make the buttons "bounce" when they're clicked on
$('body').on("mousedown", ".cssClickableIcon", function (e) {
    $(this).css("transform", "scale(0.9)"); 
});
$('body').on("mouseup", ".cssClickableIcon", function (e) {
    $(this).css("transform", "");
});

Поскольку это использует функцию jQuery on, эта работает с кнопками или другими элементами DOM, созданными командой AngularJS ng-repeat.

И, конечно, если вы используете собственные классы CSS Bootstrap, вы можете легко добавить этот эффект во все ваши кнопки Bootstrap/ Angular, используя это:

$('body').on("mousedown", ".btn", function (e) {
    $(this).css("transform", "scale(0.9)"); 
});
$('body').on("mouseup", ".btn", function (e) {
    $(this).css("transform", "");
});

Мне так нравится этот эффект, и это такая простая вещь, чтобы добавить!

Обновить

Кристиан Стюарт предложил использовать CSS вместо jQuery, и он абсолютно прав...

Итак, вы можете добиться того же эффекта, используя только этот простой CSS:

.btn:active {
    transform: scale(0.9);
}