如何从AngularJS调用jQuery [重复]

Posted 2023-03-23

【中文标题】如何从AngularJS调用jQuery [重复]

【英文标题】：How to call the jQuery from AngularJS [duplicate]

【发布时间】：2015-08-14 21:49:07

【问题描述】：

我是AngularJS 的新手，请帮我解决这个问题。 如何从AngularJS 调用jQuery 函数。

html：

<div ng-controller="TestClickController">
<button ng-click="clickFunc()">Test click</button></div>

脚本：

<script>
var app = angular.module('myApp', []);
app.controller('TestClickController', function($scope) 
    $scope.clickFunc = function() 
        $('#div1').html('User clicked');
    ;
);
</script>

单击按钮时，我收到错误"Error: $ is not defined"。

【问题讨论】：

你还没有在页面上加载jQuery

把它放在你的 标签中：

【参考方案1】：

您的错误意味着 jQuery 未包含/尚未加载。

如果您使用 Angular，我建议您使用 Angular 的方式来解决这些问题：

<div ng-controller="TestClickController">
    <button ng-click="clickFunc()">Test click</button>

    <div>
        <!-- This text will be updated when the button is clicked -->
         testText 
    </div>
</div>

控制器：

app.controller('TestClickController', function($scope) 
    $scope.testText = '';
    $scope.clickFunc = function() 
        $scope.testText = 'User clicked';
    ;
);

JSFIDDLE

Angular 的一条不成文规则是：“如果你需要使用 jQuery 来做事，那么你可能做错了什么。”

【讨论】：

对于角度方式+1，正确做事很重要:)

【参考方案2】：

这是因为你没有包含 jquery。 否则这应该有效。

此外，当您包含 jquery 时，您应该在包含 angular 之前执行此操作，以便 angular 充分利用 jquery 的存在。 然后您可以使用 angular.element 代替 $。

angular.element('#div1').html('User clicked');

还有一件事，当您使用 jquery 函数时，建议在服务或指令中执行它们。控制器并不意味着调用其他库函数。这只是一个有助于更好地测试代码的约定。

【参考方案3】：

我没有看到 ng-app，这可能是您的问题。或者在 Angular 被引导之前你没有包含 jQuery。

<div ng-app="myApp">
    <div ng-controller="TestClickController">
       <button ng-click="clickFunc()">Test click</button>
    </div>
    <div id="div1"></div>
</div>

javascript：

var app = angular.module('myApp', []);
   app.controller('TestClickController', ['$scope', function($scope) 
   $scope.clickFunc = function() 
       console.log();
       $('#div1').html('User clicked');
   ;
]);

这是一个有效的 js fiddle：

http://jsfiddle.net/bwz9e0Ly/

【参考方案4】：

错误：$ 未定义

通常意味着没有正确包含 Jquery....

【讨论】：

请提供更多关于如何正确包含 jquery 的信息