angularjs - 包装 angular-ui 指令

Question

我正在尝试围绕tabangular-ui 引导指令创建一个包装器。

我的自定义指令是；

myMoudule.directive('tabWrapper', function() {
    return {
        restrict:'AE',
        transclude: false,
        replace: true,
        compile: function compileFn(element, attrs) {
            element.replaceWith(
                '<tab heading="' + attrs.heading  + '"></tab>'
            );
        }
    };
});

用法是：

<tabset>
    <tab-wrapper heading="Page 1"></tab-wrapper>
    <tab-wrapper heading="Page 2"></tab-wrapper>
</tabset>

我不明白为什么这不起作用。 http://plnkr.co/edit/ALBiIWJbLXK0QzKNu0j6?p=preview

Answer 1

我将使用链接功能

myMoudule.directive('tabWrapper', function($compile) {
    return {
        restrict:'AE',
        replace: true,
        link:  function(scope, element, attrs) {
           var html = '<tab heading="' + attrs.heading  + '"></tab>';
           var e = $compile(html)(scope);
           element.replaceWith(e);
        }
    };
});

Answer 2

要与 ng-repeat 一起使用，您需要使用 compile 函数而不是 link 函数。compile 函数创建由 ng-repeat 复制的“base”-template-DOM。

myMoudule.directive('tabWrapper', function() {
    return {
        restrict:'AE',
        replace: true,
        compile:  function(element, attrs) {
            var html = '<tab heading="' + attrs.heading  + '"></tab>';
            var e = angular.element(html);
            element.replaceWith(e);
        }
    };
});

http://plnkr.co/edit/YxBuYmJkbGKuwYN90H1b