其他编辑答案：

Question

我正在开发一个AngularJS Web应用程序。我需要调用一个jQuery函数（对我的标记做一些更改），但似乎使用AngularJS打破了jQuery functionallity。这是一个小样本：

$(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>

当弹出窗口处于活动状态时，我想将悬停 CSS类添加到i元素。

使用AngularJS可以实现吗？

Answer 1

在你的小提琴中你只有Angular作为外部库，Angular本身不包含jQuery，因此你的代码不应该工作。一旦我添加了jQuery，代码工作正常，我的工作中经常会有角度和jQuery。

然而，您使用jQuery操作DOM的方法并不是一种有效的工作方式。

<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。

如果你有一些你想要达到的更复杂的东西，那么也许你可以发布它，我们可以看看它是否可以帮助我们构建一个有角度的东西？

Answer 2

其他编辑答案：

我个人会使用这个指令：

var app = angular.module('ui.bootstrap.demo', ['ui.bootstrap']);
.directive('toggleClass', function() {
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {
            element.bind('click', function() {
                element.toggleClass(attrs.toggleClass);
            });
        }
    };
});

使用以下html：

<p toggle-class="isActive" popover="My popover text" popover-trigger="click">icon</p>
<style>.isActive {background:green}</style>

该指令处理所有的javascript，意味着控制器只需要处理Web应用程序的行为并保持你的html超级干净。

我发现指令令人生畏，所以我通常最终会复制/粘贴我在网上找到的预建指令。

Answer 3

只需将小提琴中的html更改为：

<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script>
<h1>Title</h1>

请注意，最后会加载角度，因为它不应该破坏功能。

AngularJS：如何调用jQuery函数

3 个答案:

其他编辑答案：