AngularJS and jQuery conflict

Question

I wrote some code with AngularJs and jQuery. Only one thing works, either AngularJs or jQuery.

It seems that jQuery and AngularJs conflict each other. As soon as I include both libraries they do not work correctly anymore. If I include only one of them (AngularJS or Jquery), than that part works.

But I don't see where the problem is :...

 $(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(Code) part:

    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-Part):

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

I get this error even if I use jQuery 1.6(only sometimes):

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)

Thank you for helping.

Answer 1

jQuery and AngularJS are supposed to work together in a transparent manner. If jQuery is loaded before AngularJS, AngularJS will actually use the available jQuery instead of a "mini" built-in jQuery clone (jqLite).

It is however mentioned in the FAQ (https://docs.angularjs.org/misc/faq) that "Angular 1.3 only supports jQuery 2.1 or above. jQuery 1.7 and newer might work correctly with Angular but we don't guarantee that.". Depending on your version of Angular and jQuery, it may be the cause of your problems.

Answer 2

You should use jquery before angularJs

<script src="jquery.min.js"></script>
<script src="angular.min.js"></script>
<script src="kendo.all.min.js"></script>

Read this thead

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

Answer 3

Yes, Angular can use jQuery if it's present in your app when the application is being bootstrapped. If jQuery is not present in your script path, Angular falls back to its own implementation of the subset of jQuery that we call jQLite. Angular 1.3 only supports jQuery 2.1 or above. jQuery 1.7 and newer might work correctly with Angular but we don't guarantee that.

I also advise you to use only JQLite.. it has almost the functionalities in Jquery. But if you want to use Jquery and not the Lite version, load the Jquery before the Angular-Script.