Angular 控制器中的 jQuery：$(...).overhang 不是函数答案

【问题标题】：jQuery in an Angular Controller: $(...).overhang is not a functionAngular 控制器中的 jQuery：$(...).overhang 不是函数
【发布时间】：2017-04-05 17:17:54
【问题描述】：

所以我尝试在我的应用程序中实现overhang.js，因为我喜欢它的警报消息。

起初似乎是一个相当简单的任务......我所要做的（我认为）就是更换控制器中的线路，

alert("An HTTP request has been sent to the server.\nNow updating DaycareDB.db!");

与

$("body").overhang({
type: "success",
message: "An HTTP request has been sent to the server.\nNow updating DaycareDB.db!"
});

就是这样。不幸的是，当我尝试执行该函数并到达$("body".overhang({ 行时，什么也没有发生，chrome 控制台吐出“TypeError：jQuery(...).overhang 不是一个函数”，然后是一堆其他的东西。

我该如何解决这个问题？

这是完整的功能：

$scope.RefreshDatabase = function() {
    $http.get('/RefreshDatabase')
    .then(function(response) {
        // alert("An HTTP request has been sent to the server.\nNow updating DaycareDB.db!");
        $("body").overhang({
        type: "success",
        message: "An HTTP request has been sent to the server.\nNow updating DaycareDB.db!"
        });
        // location.reload();
    });

我觉得我在做一些愚蠢的事情或遗漏了一些导致我的控制器无法正确使用 jquery 的事情。

编辑：

这就是我所有的 angular 和 jquery 和东西被包含在内的头部：

<head>
<title>Waiting List</title>
<script type="text/javascript"></script>
<!--Overhang.js-->
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" href="./node_modules/overhang/dist/overhang.min.css" />
<script type="text/javascript" src="./node_modules/overhang/dist/overhang.min.js"></script>
<!--AngularJS-->
<script src="./angular/angular-1.5.8/angular-1.5.8/angular.min.js"></script>
<script src="./app.js"></script>
<script src="./Source/Client/Controllers/WaitingListController.js"></script>
<!--Font Awesome-->
<link rel="stylesheet" type="text/css" href="./Other Files/(CSS Stuff) font-awesome-4.7.0/font-awesome-4.7.0/css/font-awesome.min.css">
<!--Foundation CSS-->
<link rel="stylesheet" href="./Other Files/foundation-6.3.0-complete/css/foundation.css">
<link rel="stylesheet" href="./Other Files/foundation-6.3.0-complete/css/app.css">
</head>

这也是来自 chrome 控制台的完整错误消息：

TypeError: $(...).overhang is not a function
at WaitingListController.js:13
at angular.js:16383
at m.$eval (angular.js:17682)
at m.$digest (angular.js:17495)
at m.$apply (angular.js:17790)
at l (angular.js:11831)
at J (angular.js:12033)
at XMLHttpRequest.t.onload (angular.js:11966)

【问题讨论】：

@Xufox 我更新了帖子
你为什么要包含两次悬垂的css和js？删除第一个链接标签和第一个脚本标签 - 它们是不必要的。
@trevor 我不知道为什么会这样。复制和粘贴时发生的事情一定很奇怪。
@trevor 我只是将整个头部放入文件中。我可能会多次包含 jquery 只是因为我使用了不同的包......尽管这仍然不能告诉我为什么突出函数会导致类型错误。
@Ryan：检查我的答案。你需要向上移动jquery。我的意思是在 Angularjs 之前。

标签： javascript jquery angularjs controller

【解决方案1】：

我猜你在angularjs 之后包含了Jquery。如果是这样，那就交换它们。记得在Angularjs中使用Jquery，你需要在Angularjs之前包含它。

这是正确的层次结构

    <script src="path/jquery"></script>
  <script src="path/overhang.js"></script>
    <script src="path/angular"></script>

【讨论】：

好的，我移动了它并更改了帖子中的头部以反映当前存在的内容。现在仍在尝试找出导致错误消息的原因。
您仍然遇到同样的错误吗？你能测试一下 Jquery 是否正确加载了吗？
是的，移动它并得到同样的错误。我是否需要在控制器文件中做一些特别的事情？我尝试将语句从$("body").overhang({ 更改为jQuery("body").overhang({，但它产生的消息大致相同，只是将消息中的$ 更改为单词jQuery。头现在在帖子中的样子是它在文件中的样子。我已经刷新了页面和所有内容，以确保应用了这些更改。
@rayn 你能在本地包含 Jquery 而不是 CDN 链接吗？它比 mat=y 更容易调试吗？
我把这两行放在头上，它给了我警报。所以看起来 jQuery 正在正确加载。 <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script><script>$(function() { alert('hello') });</script>