AngularJS - 工具提示不起作用答案

【问题标题】：AngularJS - Tooltip not functioningAngularJS - 工具提示不起作用
【发布时间】：2018-10-10 15:48:40
【问题描述】：

这是我第一次尝试AngularJS，我通过W3找到了一个例子。我希望使用它为我将为客户处理的新 Bootstrap 项目创建路由。

问题是它似乎没有加载我正在使用的 javascript。我对 javascript 和 DOM 不是很熟悉，所以不知道为什么这不起作用。

为了展示我所说的示例，我删除了所有内容，并使用图像和工具提示进行了尝试。索引页面上的图像可以正常工作，但是在加载测试页面时，工具提示会停止工作。我试图通过开发者工具跟踪是否有错误，但没有任何显示。

索引：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="assets/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="assets/css/custom.css">
    <link rel="stylesheet" type="text/css" href="assets/css/font-awesome.min.css">
    <script src="assets/js/jquery-3.3.1.min.js"></script>
    <script src="assets/js/bootstrap.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-route.js"></script>
    <script>
    var app = angular.module("myApp", ["ngRoute"]);
    app.config(function($routeProvider) {
        $routeProvider
        .when("/", {
            templateUrl : "main.php"
        })
        .when("/home", {
            templateUrl : "main.php"
        })
        .when("/test", {
            templateUrl : "test.php"
        })
    });
    </script>
    <script>
      $(document).ready(function() {
          $('[data-toggle="tooltip"]').tooltip();
      });
    </script>
  </head>
  <body ng-app="myApp">
    <p><a href="#!home">Main</a> | <a href="#!test">Test</a></p>
    <p><img src="http://placehold.it/200x200" class="img-responsive" data-toggle="tooltip" data-placement="top" data-html="true" title="<strong>Test</strong>"></p>
    <div ng-view></div>
  </body>
</html>

测试：

<p><strong>Test</strong></p>
<p><img src="http://placehold.it/200x200" class="img-responsive" data-toggle="tooltip" data-placement="top" data-html="true" title="<strong>Test</strong>"></p>

工具提示显示在 ng-view DIV 之前的索引上。

工具提示未显示在测试 ng-view 上。

更新

遇到另一个问题，当我尝试重新访问调用 main.php 的 /home 时，它只会加载一个包含最新帖子的空白屏幕，而没有其他任何内容。

首页

关于

返回首页

也没有显示任何错误。

【问题讨论】：

不要将 jQuery 与 AngularJS (at all) 一起使用。而是考虑使用ui.bootstrap，它使用uib-tooltip-template 实现工具提示（带有模板）。添加脚本后，别忘了注入模块：angular.module("myApp", ["ngRoute", "ui.bootstrap"])
嗨，Aleksey。非常感谢您对此的帮助。我让它工作了！
我现在有另一个问题。你知道为什么它只会加载页面的一部分吗？我将此逻辑添加到我正在使用的完整网站中：habbfinity.ca/V4$-$4V2，当我转到 About back to Home 时，它只会重新加载最新的帖子，没有其他内容。更新了我的问题。
首先，不要使用 .php 文件，另外你可能已经破坏了你的路由（我无法检查，因为它在你的后端），这是一个工作路由的例子 - Plunker
我需要 PHP 文件以获取在我将使用的许多页面上显示的信息，例如时间表数据。在您向我展示的 plunker 上，如果我理解正确，底部脚本中的任何内容都会显示，对吗？所以对于 about.html ，它只会显示“关于”？

标签： javascript html angularjs

【解决方案1】：

('[data-toggle="tooltip"]').tooltip();

执行以下操作：搜索所有现有元素并将工具提示附加到它们。从角度来看，这完全没用，因为元素一直在创建和删除。（这就是为什么它不适用于ng-view中的工具提示，因为此代码在ng-view被角度处理并填充内容之前执行）

这就是为什么在 Angular 中所有的 Jquery 插件都应该通过指令来使用。

但是对于 Angular 初学者的真正建议是完全删除 Jquery，这样你就不能使用 jquery 并且你不得不以 Angular 的方式做事。在 Angular 中有多种替代方法可以用于 jquery 中的各种事物，即工具提示 - 提到 ui.bootstrap 或 angular-material。

【讨论】：

感谢两位的回复。删除 document.ready 部分并包含引导 ui 后，我让它正常运行。
我现在有另一个问题。你知道为什么它只会加载页面的一部分吗？我将此逻辑添加到我正在使用的完整网站中：habbfinity.ca/V4$-$4V2，当我转到 About back to Home 时，它只会重新加载最新的帖子，没有其他内容。更新了我的问题。