javascript - AngularJS - 工具提示不起作用

问题描述

这是我第一次尝试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 之前的索引上。