AngularJS - $compile is not a function

Question

I have been trying to figure this out for quite a while, hopefully someone can point out what is wrong.

I am trying to compile the HTML template because it does not call the function removeAllImages(). According to the console log for scope, I can see that the function is there.

Here is my directive:

musicianMarketplace.directive('slideshowImagesManage', ['$q', 'Auth', '$compile', 
  function ($q, Auth, $http, $location, $compile) {
    return {
        restrict: 'E',
        // scope: {
        //     slideshowImages: '=',
        //     // removeAllImages: '&',
        //     // removeImage: '&'
        // },
        // transclude: true,
        link: function ($scope, elem, attr) {

            console.log($scope);

            // slideshowImages = attr.slideshowImages;
            // removeAllImages = attr.removeAllImages;
            // removeImage = attr.removeImage;

            function updateImages() {
                $q.when($scope.slideshowImages).then(function (slideshowImages) {
                    elem.empty();
                    var html = '';
                    if (slideshowImages != null) {

                        html += '<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">';

                        html += '<div><a ng-href="" ng-click="removeAllImages(' + 
                                 Auth.getCurrentUser().id + 
                                ');">Remove All Images</a></div>';

                        $.each(slideshowImages, function (key, value) {
                            if (value.fd || value[0].fd) {
                                html += '<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">';
                                if (value.fd) {
                                    html += '<img ng-src="' + S3STORE + '/' + value.fd + 
                                            '" width="100%" alt="' + value.fd + '" />';
                                    html += '<a ng-href="" ng-click="removeImage({image: ' + 
                                            value.fd + '})">Remove</a>';
                                } else if (value[0].fd) {
                                    html += '<img ng-src="' + S3STORE + '/' + value[0].fd + 
                                            '" width="100%" alt="' + value[0].fd + '" />';
                                    html += '<a ng-href="" ng-click="removeImage({image: ' + 
                                            value[0].fd + '})">Remove</a>';
                                }
                                html += '</div>';
                            }
                        });

                        html += '</div>';

                        html = $compile(html)(scope);

                        elem.html(html);

                    } else {
                        html = "NO IMAGES";
                        elem.html(html);
                    }
                });
            }

            updateImages();

            $scope.$watch(attr.slideshowImages, function (newVal, oldVal) {
                if (newVal != oldVal) {
                    slideshowImages = newVal;
                    updateImages();
                }
            });

            $scope.$on('$destroy', function () {
                updateImages();
            });

        }
    };
}]);

As you can see I have tried with and without isolated scope. Everything else works except the function call.

The function itself I have just a console log:

$scope.removeAllImages = function (user) {
    console.log("HERE");
}

I have tried this HTML for isolated scope:

<slideshow-images-manage 
   slideshow-images="slideshowImages" 
   remove-all-images="removeAllImages(user)" 
   remove-image="removeImage(image)">
</slideshow-images-manage>

and this HTML for non-isolated scope:

<slideshow-images-manage></slideshow-images-manage>

Answer 1

Your dependencies are not injected properly.

['$q', 'Auth', '$compile', function ($q, Auth, $http, $location, $compile) {...

In the string part, you failed to add '$http' and '$location' . Both the string part and the function arguments need to match up 1:1. Same services injected in the same order.

Answer 2

The error is expected as you are not injecting dependencies properly in the directive.

Use

musicianMarketplace.directive('slideshowImagesManage', ['$q', 'Auth', '$compile', '$http', '$location', function ($q, Auth, $compile, $http, $location){

instead of

musicianMarketplace.directive('slideshowImagesManage', ['$q', 'Auth', '$compile', function ($q, Auth, $http, $location, $compile) {