Question

我正在尝试围绕tab angular-ui bootstrap指令创建一个包装器。

我的自定义指令是;

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一起使用时，您需要使用编译功能而不是链接功能。编译函数创建“base”-template-DOM，它由ng-repeat重复。

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

包装angular-ui指令

2 个答案: