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

Posted 2023-05-09

技术标签:

【中文标题】jQuery 选择器在 AngularJS ng-view 指令中不起作用【英文标题】：jQuery selectors not working inside AngularJS ng-view directive 【发布时间】：2019-03-10 22:22:51 【问题描述】：

如果我这样说：

<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 指令内的元素。

如何解决？

【问题讨论】：

***.com/questions/25915465/…的可能重复 【参考方案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 或类似的东西。

【讨论】：

【参考方案2】：

我找到了答案：

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

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

这个问题的解决方法，很简单：

在 index.html 文件中包含 jQuery before AngularJS 脚本（在 body 标记的末尾）。

将 ng-if 指令添加到每个具有选择器的 jQuery 脚本（但不添加到主 jQuery 文件），如下所示： <script src="assets/js/scripts.rtl.js" ng-if="initSrc"></script>

$rootScope.initSrc=true

所有 jQuery 函数都将正常工作。

【讨论】：