Question

我刚开始研究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。

非常感谢，

Answer 1

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

检查angular.element

Answer 2

不要在你的控制器中使用这样的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指令禁用元素。

Jquery和AngularJs冲突

2 个答案: