Селекторы jQuery не работают внутри директивы AngularJS ng-view - PullRequest
Новая
       8

Селекторы jQuery не работают внутри директивы AngularJS ng-view

0 голосов
/ 05 октября 2018

Если я добавлю это: 

<button type="button" class="btn btn-info" data-toggle="tooltip" data-placement="top" title="Tooltip on top">
  Tooltip on top
</button>

Внутри файла index.html, между тегами <body>, это работает - я получил подсказку, показанную в порядке.

Но если я добавлю то же самое в директиву ng-view - например: 

<div ng-view></div>

Кнопка показывается, но всплывающая подсказка не срабатывает.

ng-viewсодержит другой файл шаблона html, использующий модуль ngRoute , который содержит тег <button>, как указано выше.

Кажется, что jQuery не может выбирать элементы, которые находятся внутри директивы AngularJS ng-view.

Как это можно решить?

Ответы [ 2 ]

0 голосов
/ 05 октября 2018

Я нашел ответ :

Селекторы jQuery, такие как $('[data-toggle="tooltip"]').tooltip();, получают действие до того, как ng-view начинает действовать.

Следовательно, селектор всплывающей подсказки пытаетсявыбрать элемент, который еще не был загружен в DOM.

Решение этой проблемы простое:

  1. Включить jQuery до Сценарии AngularJS в файле index.html (в конце тега body).

  2. Добавить директиву ng-if к каждому сценарию jQuery, имеющему селекторы (но не к основному файлу jQuery)), вот так: <script src="assets/js/scripts.rtl.js" ng-if="initSrc"></script>

  3. Установите $rootScope.initSrc=true после загрузки любой директивы / компонента.

Все функции jQuery будут работать правильно.

0 голосов
/ 05 октября 2018

jQuery может и действительно выбирает кнопку.Тем не менее, дайджест-цикл AngularJS, вероятно, удаляет содержимое всплывающей подсказки из DOM.За пределами элемента, на котором размещено приложение AngularJS, это не применяется (без каламбура).Кроме того, всплывающие подсказки добавляются асинхронно.

Чтобы AngularJS распознал изменение 

import $ from 'jquery';
import 'bootstrap';
import angular from 'angular';

run.$inject = ["$scope"];
function run($scope) {
  const tooltippedElements = $('[data-toggle="tooltip"]');
  tooltippedElements.on('hidden.bs.tooltip', onShownOrHidden);

  tooltippedElements.on('shown.bs.tooltip', onShownOrHidden);

  function onShownOrHidden() {
    if (!$scope.$phase()) {
      $scope.$apply();
    }
  }
} 

angular
  .module('app', [])
  .run(run);

Но вместо того, чтобы преодолевать все эти проблемы, используйте angular-ui-bootstrap или что-то подобное.

...