AngularJS和jQuery冲突

时间:2015-01-21 10:26:06

标签: jquery angularjs

我用AngularJs和jQuery编写了一些代码。只有一件事可行,无论是AngularJs还是jQuery。

似乎jQuery和AngularJs相互冲突。只要我包含这两个库,它们就不再正常工作了。如果我只包含其中一个(AngularJS或Jquery),那么该部分可以工作。

但我不知道问题出在哪里:......

 $(document).ready(function () {

        $('#Text').focus();
            $(document).on("mouseover", ".englishMtg", function () {
            var currentHref = $(this).attr("href");
            if (currentHref.indexOf("http") == -1) {
                var changedLink = currentHref.match(/[^\/?#]+(?=$|[?#])/);
                var englishSearchString = ".../query?q="+changedLink.toString().replace('.jpg', '').split(',')[0];
                $(this).attr("href", englishSearchString);
            }


        });

        $(document).on("mouseover", ".germanMtg", function () {
            var currentHref = $(this).attr("href");
            if (currentHref.indexOf("http") == -1) {
                var changedLink = currentHref.match(/[^\/?#]+(?=$|[?#])/);
                var germanSearchString = "http://..../query?q="+changedLink.toString().replace('.jpg', '').split(',')[1];
                $(this).attr("href", germanSearchString);
            }
        });

        $(document).on("mouseover", ".tumbailImage", function () {
            var currentHref = $(this).attr("src");
            var changedLink = currentHref.match(/[^\/?#]+(?=$|[?#])/);

            $(this).closest(".thumbnail").attr("title", changedLink.toString().replace('.jpg', '').split(',')[1]);

            //alert(changedLink.toString().replace('.jpg', '').split(',')[1]);
        });

    });

AngularJS(代码)部分:

    var app=angular.module('myApp', []);

function MyCtrl($scope) {

    $scope.currentPage = 0;
    $scope.pageSize = 18;
    $scope.data = ['...']; //some data

    $scope.numberOfPages=function(){
        return Math.ceil($scope.filtered.length / $scope.pageSize);
    }

}


app.filter('startFrom', function() {
    return function(input, start) {
        start = +start; //parse to int
        return input.slice(start);
    }
});

AngularJS(HTML-部分):

<div class="form-horizontal" ng-app="myApp" ng-controller="MyCtrl" ng-init="imageHeight=300;imageWidth=400">
<div class="form-group">
    <div class="col-md-12">
        <div class="panel-group col-md-12" id="accordion">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <div class="panel-title">
                        <div style="text-align:center">
                            <button class="btn btn-default" ng-disabled="currentPage == 0" ng-click="currentPage=currentPage-1">
                                Previous
                            </button>
                            <a class="label label-default" style="font-size:large" data-toggle="collapse" data-parent="#accordion" href="#collapseOne"><span class="badge"> {{currentpage+1}}/{{numberOfPages()}} ({{filtered.length}} results)</span></a>
                            <button class="btn btn-default" ng-disabled="currentPage >= filtered.length/pageSize - 1" ng-click="currentPage=currentPage+1">
                                Next
                            </button>
                        </div>
                    </div>
                </div>
                <div id="collapseOne" class="panel-collapse collapse in">
                    <div class="panel-body">
                        <div class="input-group col-md-4">
                            <span class="input-group-addon editor-label">search</span>
                            <input type="text" class="form-control" placeholder="search" ng-model="searchImage">
                        </div>
                        <div class="input-group col-md-4">
                            <span class="input-group-addon editor-label">width</span>
                            <input type="text" class="form-control" placeholder="width" ng-model="imageWidth">
                            <span class="input-group-addon">px</span>
                        </div>
                        <div class="input-group col-md-4">
                            <span class="input-group-addon editor-label">height</span>
                            <input type="text" class="form-control" placeholder="height" ng-model="imageHeight">
                            <span class="input-group-addon">px</span>
                        </div>
                        <br />
                        <div class="clearfix"></div>
                        <div class="col-md-4 " ng-repeat="item in filtered = (data | filter: searchImage) | startFrom:currentPage*pageSize | limitTo:pageSize" style="overflow:auto">
                            <a href="{{item}}" title="{{item}}" target="_blank" class="germanMtg"><img src="~/Pictures/german.png" /></a>
                            <a href="{{item}}" title="{{item}}" target="_blank" class="englishMtg"><img src="~/Pictures/uk.png" /></a>
                            <a href="{{item}}" title="{{item}}" target="_blank" class="thumbnail"><img ng-src="{{item}}" class="tumbailImage" height="{{imageHeight}}" width="{{imageWidth}}"></a>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

即使我使用jQuery 1.6(有时只是),我也会收到此错误:

Error: $scope.filtered is undefined MyCtrl/$scope.numberOfPages@http://localhost:5891/Scripts/Angular/JSONMtgs/jsonAngularJs.js:26200:9 _functionCall/<@http://localhost:5891/Scripts/Angular/Source/angular_1_0_3.js:6193:13 $interpolate/fn@http://localhost:5891/Scripts/Angular/Source/angular_1_0_3.js:4810:22 $RootScopeProvider/this.$get</Scope.prototype.$digest@http://localhost:5891/Scripts/Angular/Source/angular_1_0_3.js:7720:32 $RootScopeProvider/this.$get</Scope.prototype.$apply@http://localhost:5891/Scripts/Angular/Source/angular_1_0_3.js:7926:13 bootstrap/<@http://localhost:5891/Scripts/Angular/Source/angular_1_0_3.js:930:7 invoke@http://localhost:5891/Scripts/Angular/Source/angular_1_0_3.js:2802:1 bootstrap@http://localhost:5891/Scripts/Angular/Source/angular_1_0_3.js:928:1 angularInit@http://localhost:5891/Scripts/Angular/Source/angular_1_0_3.js:904:5 @http://localhost:5891/Scripts/Angular/Source/angular_1_0_3.js:14527:5 jQuery.Callbacks/fire@http://localhost:5891/Scripts/Jquery/jquery-1.10.2.js:3048:10 jQuery.Callbacks/self.fireWith@http://localhost:5891/Scripts/Jquery/jquery-1.10.2.js:3160:7 .ready@http://localhost:5891/Scripts/Jquery/jquery-1.10.2.js:433:1 completed@http://localhost:5891/Scripts/Jquery/jquery-1.10.2.js:104:4


return logFn.apply(console, args);

angular_1_0_3.js (Zeile 5582)

感谢您的帮助。

4 个答案:

答案 0 :(得分:10)

jQuery和AngularJS应该以透明的方式协同工作。如果在AngularJS之前加载jQuery,AngularJS实际上将使用可用的jQuery而不是“迷你”内置的jQuery克隆(jqLit​​e)。

然而,在FAQ(https://docs.angularjs.org/misc/faq)中提到“Angular 1.3仅支持jQuery 2.1或更高版本.jQuery 1.7和更新版本可能与Angular一起正常工作,但我们不能保证这一点。”根据您的Angular和jQuery版本,它可能是您遇到问题的原因。

答案 1 :(得分:5)

你应该在angularJs

之前使用jquery
<script src="jquery.min.js"></script>
<script src="angular.min.js"></script>
<script src="kendo.all.min.js"></script>

阅读本帖

Which is the right way to add Jquery and Angularjs in one project

答案 2 :(得分:1)

  

是的,当应用程序被引导时,Angular可以使用jQuery,如果它存在于您的应用程序中。如果你的脚本路径中没有jQuery,Angular会回退到我们称之为jQLite的jQuery子集的实现。   Angular 1.3仅支持jQuery 2.1或更高版本。 jQuery 1.7和更新版本可能与Angular正常工作,但我们不保证。

我还建议你只使用JQLite ..它几乎具有Jquery的功能。但是如果你想使用Jquery而不是Lite版本,那么在Angular-Script之前加载Jquery。

答案 3 :(得分:0)

尝试使用firebug来捕获JS / JQuery / AJS的错误。 firebug是Mozilla Firefox的一个插件,你应该已经安装了firefox的更新版本。