Jquery 和 AngularJs 冲突答案

【问题标题】：Jquery and AngularJs conflictJquery 和 AngularJs 冲突
【发布时间】：2014-08-30 17:58:49
【问题描述】：

我刚开始研究 AngularJS。在尝试同时测试 Jquery 和 Angularjs 时，出现了一个问题，AngularJs 似乎以某种方式阻止了 Jquery interventino。

在下面的代码中：我包含一个 jquery 锚点单击事件处理程序，它将阻止锚点引导用户。但是，角度控制器外部的锚点工作正常，而内部的锚点没有运行。

在不创建自定义指令的情况下，是否有 Jquery 和 AngularJs 两者？

html:

<body data-ng-app="AngApp">
    <a href="/haha" data-disable>open</a>
    <div data-ng-controller="demoCrtl">
        <div data-ng-switch on="test")>
            <span data-ng-switch-when="1"><a href="#" data-disable>Cancel</a></span>
            <span data-ng-switch-default> its default</span>
        </div>
    </div>
</body>

javascript：

    var app = angular.module('AngApp',[]);
    app.controller('demoCrtl', ['$scope', function($scope) {
        $scope.test=1;
    }]);
    $('a[data-disable]').on('click',function(e){e.preventDefault();console.log('ha');});

我正在使用 angularjs 1.3 和 Jquery 2.1。

非常感谢，

【问题讨论】：

“在下面的代码中” - 什么代码？请点击“编辑”并添加相关的JS和html。
对不起，我想弄清楚如何添加 jsfiddle 链接。将代码粘贴到代码块中会在提交时出现错误。
混合 angularjs 和 jquery 是个坏主意——尤其是你尝试这样做的方式。我建议您阅读@josh-david-miller 关于从 jquery 切换到 angular 的出色回复：stackoverflow.com/questions/14994391/…
确实，谢谢你的链接。

标签： javascript jquery angularjs conflict

【解决方案1】：

不要在控制器中使用这样的 jQuery 代码。您应该使用 ngClick 指令并将其绑定到控制器中的操作。

在你看来：

<a ng-click="disable()" ng-disabled="disabled">disable</a>

在你的控制器中

$scope.disabled = false;
$scope.disable = function () {
    console.log('disable clicked');

   // maybe do something else

     $scope.disabled = true;
 }

这并没有复制您正在尝试做的事情，而是提供了一个示例，说明如何使用 ngClick 指令将控制器中的操作绑定到视图中的元素，以及使用 ngDisable 指令禁用元素。

【讨论】：

谢谢，我意识到 angularjs 感知架构与普通 jquery 完全不同。

【解决方案2】：

您不需要将 jQuery 包含到您的应用程序中。因为当应用程序被引导时它存在于您的应用程序中。如果 jQuery 不在您的脚本路径中，Angular 将回退到它自己的 jQuery 子集实现，我们称之为 jQLite。

查看angular.element

【讨论】：