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不是一個函數

回答

相關問題