jquery - AngularJS:如何调用 jQuery 函数

Question

我正在开发一个 AngularJS Web 应用程序。我需要调用 jQuery 函数(对我的标记进行一些更改)，但似乎使用 AngularJS 会破坏 jQuery 功能。这是一个小样本:

$(document).ready(function () {
    $('h1').click(function () {
        alert("Title was clicked.");
    });
});

参见my JSFiddle .

如果我只使用 jQuery，这可以正常工作，但如果我使用 AngularJS 框架运行它，它就不起作用。

为什么？

EDIT1(偏离主题)

我正在使用AngularJS Bootstrap Popover通过图标上的点击触发器。以下是未单击图标时的 HTML 标记:

<i class="fa fa-circle" popover="My popover text" popover-trigger="click"></i>

当单击图标并显示弹出窗口时，弹出窗口标记将附加到图标上:

<i class="fa fa-circle" popover="My popover text" popover-trigger="click"></i>  
<div class="popover right fade in" ...>
    <div class="arrow"></div>
    <div class="popover-inner">
        <h3 class="popover-title ng-binding ng-hide" ng-bind="title" ng-show="title"></h3>
        <div class="popover-content ng-binding" bind-html-unsafe="content">My popover text</div>
    </div>
</div>

当弹出窗口处于事件状态时，我想向 i 元素添加一个 hover CSS 类。

这可以使用 AngularJS 来完成吗？

Answer 1

在你的 fiddle 中，你只有 Angular 作为外部库，Angular 本身不包含 jQuery，因此你的代码不应该工作。添加 jQuery 后，代码就可以正常工作，我经常在工作中同时使用 Angular 和 jQuery。

但是，使用 jQuery 操作 DOM 的方法并不是一种有 Angular 的工作方式。

<div ng-app='main' ng-controller='mainCntrl'>
    <h1 ng-click='click()'>Title</h1>
</div>
<script>
    app = angular.module('main', [])
    app.controller('mainCntrl', function ($scope) {
        $scope.click = function(){
            alert("Title was clicked")
        }
    })
</script>

(我知道写这个的方式稍微不那么冗长，但我希望这能让发生的事情更清楚)

jsFiddle:http://jsfiddle.net/ph6srf5g/3/

这是一个很好的线程，可以帮助您理解 Angular 和 jQuery 之间的思维差异: "Thinking in AngularJS" if I have a jQuery background?

我真的建议你放弃 jQuery，只使用 Angular。就我个人而言，我限制自己只在指令内使用 jQuery。

如果您想要实现更复杂的目标，那么也许您可以将其发布，我们可以看看我们是否可以帮助在 Angular 中构建它？