bxslider directive throwing error `Uncaught TypeError: Cannot read property 'indexOf' of undefined`

Question

I am using angularjs in my application where I have created a directive for bxslider. Below is code of directive:

angular.module('sbAdminApp')
.directive('bxSlider', function(){
    return{
        restrict: "A",
        require: "ngModel",
        link: function(scope, element, attrs, ctrl){
            element.ready(function(){
                $($(element[0])).bxSlider({
                    maxSlides:1,
                    auto:true,
                    controls:false,
                    pager:true
                });
            })
        }
    }
})

Above I am using like this $($(element[0])).bxSlider({ after ready function as I search for a problem where bxslider should work with ng-repeat and found this solution after which bxslider is working but sometimes images doesn't load and I can see this error always.

Uncaught TypeError: Cannot read property 'indexOf' of undefined

Answer 1

Finally i got the answer after so many searches

This is not a angularjs error this is a jquery version compatibility with bxslider.

Issue is arised by jQuery .load() function.

In bxslider.js file find .load() function's code line. It was used only 1 time in bxslider.js.

From

$(this).load();

To

$(this).trigger('load');

Thanks to kkakkurt for this great solution https://stackoverflow.com/a/38562965/4119808