包裝中無法找到指令'uibSlide'所需的控制器'uibCarousel'

我有一個包含該輪播指令的指令。當我替換幻燈片對象時，會出現一個錯誤，指示「uibSlide」指令所需的「控制器'uibCarousel'在包裝時找不到」。包裝中無法找到指令'uibSlide'所需的控制器'uibCarousel'

我設法複製它在一個普朗克。我添加了一個簡單的指令，如下所示：

angular.module('ui.bootstrap.demo').directive('mydir', ['$compile',function($compile){ 
    function link(scope, element, attrs) { 
    scope.$watch('slides', function (value) { 
     var template = '<uib-carousel interval="myInterval" no-wrap="noWrapSlides">' + 
     '<uib-slide ng-repeat="slide in slides" active="slide.active">' + 
      '<img ng-src="{{slide.image}}" style="margin:auto;">' + 
      '<div class="carousel-caption">' + 
      '<h4>Slide {{$index}}</h4>' + 
      '<p>{{slide.text}}</p>' + 
      '</div>' + 
     '</uib-slide>' + 
     '</uib-carousel>;'; 
     element.empty(); 
     element.html(template); 
     $compile(element.contents())(scope); 
    }); 
    } 
    return { 
      link: link, 
      restrict: 'E' 
     }; 
}]);

我還添加了這個功能，以取代幻燈片：

$scope.createNewSlide = function(){ 
    $scope.slides = []; 
    var newWidth = 600 + $scope.slides.length + 1; 
    $scope.slides.push({ 
     image: '//placekitten.com/' + newWidth + '/300', 
     text: ['More','Extra','Lots of','Surplus'][slides.length % 4] + ' ' + 
     ['Cats', 'Kittys', 'Felines', 'Cutes'][slides.length % 4] 
    }); 
    };

如果碰到更換幻燈片按鈕，轉盤仍會出現，但錯誤會顯示在你的控制檯中。 http://plnkr.co/edit/IGyaWwXGUa8n2LykMkmV?p=preview

我是否正在做一些不應該在我更換幻燈片對象時做的事情？

編輯：我沒有注意到的一件事是刪除ng-repeat指令不會導致此問題。另外一個觀察結果是，angular實際上編譯了從前一次編譯指令後刪除的所有舊DOM元素。當我第一次注意到uibSlide正在尋找所需的控制器時，uibSlide實際上是在DOM上的元素。當我通過單擊按鈕添加一個新數組時，第一個查找控制器的uibSlide位於已從DOM中刪除的元素上。

來源

2015-10-16 Animal2

我想通過重新編譯當前被刪除的DOM元素來消除錯誤，從而停止角度。

我更改了鏈接器函數來保存子範圍。我在幻燈片數組發生變化時自己摧毀它，然後創建一個新的幻燈片。

function link(scope, element, attrs) { 
    var childScope 
    scope.$watch('slides', function (value) { 
     var template = '<uib-carousel interval="myInterval" no-wrap="noWrapSlides">' + 
     '<uib-slide ng-repeat="slide in slides" active="slide.active">' + 
      '<img ng-src="{{slide.image}}" style="margin:auto;">' + 
      '<div class="carousel-caption">' + 
      '<h4>Slide {{$index}}</h4>' + 
      '<p>{{slide.text}}</p>' + 
      '</div>' + 
     '</uib-slide>' + 
     '</uib-carousel>;'; 
     element.empty(); 
     if(childScope) 
      childScope.$destroy(); 
     childScope = scope.$new(); 
     element.html(template); 
     $compile(element.contents())(childScope); 
    }); 
    }

http://plnkr.co/edit/g7wN2LSgbT4s7mULAzoJ?p=preview

來源

2015-10-17 01:07:21 Animal2

我發現這個頁面詳細的範圍問題http://roubenmeschian.com/rubo/?p=51 – Animal2

完全救了我。你有什麼想法，我怎麼可以傳遞'templateUrl'到'模板'，而不是在那裏宣佈完整的模板？ – AndreaM16

不要緊，使用'$ templateCache'。 – AndreaM16

從@ Animal2答案開始，我能夠解決的問題，並輸入蛋白克模板槽$templateCache

function bannerDirective($compile, $http, $templateCache, $parse) { 

    function link(scope, element, iAttrs) { 
     var childScope 
     scope.$watch('slides', function() { 
     var template = $parse(iAttrs.data)(scope); 
     $http.get('app/myBanner.html', {cache: $templateCache}) 
      .success(function(tplContent){ 
      element.replaceWith($compile(tplContent)(scope)); 
     }); 
      element.empty(); 
     if(childScope) 
      childScope.$destroy(); 
     childScope = scope.$new(); 
     element.html(template); 
     $compile(element.contents())(childScope); 
     }); 
    } 

     var directive = { 
      restrict: 'E', 
      controller: 'BannerController', 
      controllerAs: 'bannerCtrl', 
      bindToController: true, 
      link: link 
     }; 

     return directive; 
    }

希望能對大家有所幫助。

來源

2016-09-14 11:19:15 AndreaM16

包裝中無法找到指令'uibSlide'所需的控制器'uibCarousel'

回答

相關問題