Question

指令：

app.directive('myCarousel', function ($compile) {
    return {
        restrict: 'E'
        , transclude: false
        , replace: true
        , scope: true
        , compile: function compile($element, $attr) {

            var html = '<ul rn-carousel="" rn-carousel-indicator="">' + $element.html() + '</ul>'
            $element.html(html)

            return function ($scope) {
                $compile($element.contents())($scope);

            }
        }
    };
})

用法：

<my-carousel>
        <li>Todd</li>
        <li>Andrej</li>
    </my-carousel>

输出

<my-carousel class="ng-scope">
    <div id="carousel-1" class="rn-carousel-container ng-scope" style="width: 1600px;">
        <div id="carousel-2" class="rn-carousel-container" style="width: 1600px;">
            <blah>
        </div>
    </div>
</my-carousel>

我遇到的问题（至少已知的问题

1 - 我仍然有my-carousel元素，为什么没有替换删除它？我是否需要自己做这个，因为我正在编写编译功能？我会谈谈那个吗？

2 - 由于某种原因，看起来rn-carousel内部指令正在编译内部？这很可能是我对这个内部指令缺乏了解它是如何工作的。但是这个编译函数看起来有什么不对吗？

Answer 1

当您使用编译功能时，您需要自己进行DOM操作。您可以使用replace: true：

获得与replaceWith相同的效果

compile: function($element, $attr) {
  var html = '<ul rn-carousel="" rn-carousel-indicator="">' + $element.html() + '</ul>'
  $element.replaceWith(html);

  return function(scope) {
    /*probably don't need to compile element contents here*/
  }
}

但是......看起来你根本不需要使用编译。通过给指令一个模板，并使用翻译，你可以完成同样的事情：

app.directive('myCarousel', function() {
  return {
    restrict: 'E',
    transclude: true,
    replace: true,
    scope: true,
    template: '<ul rn-carousel="" rn-carousel-indicator="" ng-transclude></ul>'
  };
})

Answer 2

当前工作解决方案（尽管没有替换父元素）：

eido.directive('myCarousel', function ($compile) {

    return {
        restrict: 'E'
        , transclude: false
        , replace: true
        , scope: true
        , compile: function compile($element, $attr) {

            var html = '<ul rn-carousel="" rn-carousel-indicator="">' + $element.html() + '</ul>'
            $element.html(html)

            return function ($scope) {
            }
        }
    };
})

Angular Directive Compile函数：忽略replace，并嵌套编译内容

2 个答案: