javascript - 指令 'uibCarousel' 要求的 Controller 'uibSlide' 包装时找不到

Question

我有一个包装该轮播指令的指令。当我替换 slides 对象时，它会出现错误消息“包装时找不到指令‘uibSlide’所需的 Controller ‘uibCarousel’。”

我设法在 plunkr 中复制了它。我添加了一个简单的指令，如下所示:

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 寻找所需的 Controller 时，uibSlide 的元素实际上在 DOM 上。当我通过单击按钮添加一个新数组时，第一个正在寻找 Controller 的 uibSlide 位于已从 DOM 中删除的元素上。

Answer 1

我想出了如何消除阻止 Angular 重新编译当前删除的 DOM 元素的错误。

我更改了链接器函数以包含子作用域。当 slides 数组更改时，我自己销毁它，然后创建一个新的。

  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