AngularJS - $ compile不是一个函数

Question

我一直试图解决这个问题很长一段时间,希望有人可以指出出了什么问题.

我正在尝试编译HTML模板,因为它不会调用该函数removeAllImages().根据范围的控制台日志,我可以看到该功能在那里.

这是我的指示:

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();
            });

        }
    };
}]);

正如你所看到的,我曾经尝试过使用和不使用隔离范围.除函数调用外,其他所有工作都有效.

函数本身我只有一个控制台日志:

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

我已尝试将此HTML用于隔离范围:

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

这个HTML用于非隔离范围:

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

Answer 1

由于您未在指令中正确注入依赖项,因此会出现此错误.

使用

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

代替

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