Question

如果我这样说：

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

显示了按钮，但未触发工具提示。

使用 ngRoute 模块，ng-view包含另一个html模板文件，该模块包含上面指定的<button>标签。

似乎jQuery无法选择AngularJS ng-view指令中的元素。

如何解决？

Answer 1

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或类似的内容。

Answer 2

我找到了答案：

jQuery选择器，例如$('[data-toggle="tooltip"]').tooltip();在ng-view开始执行之前就开始执行。

因此工具提示选择器正在尝试选择尚未加载到DOM的元素。

解决此问题的方法很简单：

在index.html文件中（位于body标签的末尾）在AngularJS脚本中包含jQuery 之前。
向每个具有选择器的jQuery脚本（而非主jQuery文件）添加ng-if指令，如下所示： <script src="assets/js/scripts.rtl.js" ng-if="initSrc"></script>
1. 在加载任何指令/组件之后设置$rootScope.initSrc=true。

所有jQuery函数将正常运行。

jQuery选择器在AngularJS ng-view指令中不起作用

2 个答案: