AngularJS - $ compile不是一个函数

我一直试图弄清楚这一点，希望有人能指出什么是错的。

我想编译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>

来源

2017-03-08 joegod86

由于您没有在指令中正确注入依赖关系，因此会出现此错误。的

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

来源

2017-03-08 20:11:55 Satpal

谢谢你的工作，所以问题是我没有注入所有其他的依赖？ – joegod86

是的。这是问题所在。你可以投票/我的答案，实际解释这一点... – Pytth

使用

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

，而不是你的依赖不会被正确注射。

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

在字符串中的一部分，你无法添加'$http'和'$location'。字符串部分和函数参数都需要匹配1：1。按相同的顺序注入相同的服务。

来源

2017-03-08 20:21:35 Pytth

AngularJS - $ compile不是一个函数

回答

相关问题