在AngularJS中的指令元素之后插入另一个具有属性值或范围模型的元素

Question

我想创建一个指令，在使用 ng-repeat 指令创建的每个 <dt> 元素之后创建一个 <dd> 元素。如何将 <dd> 的内容设置为指令属性值或 ng-repeat 范围模型值？

<dl>
  <dt ng-repeat="item in items" insert-dd="{{ item.dd_vaue }}">{{ item.dt_value }}</dt>
</dl>

angular.directive('insertDd', function () {
  restrict: 'A',
  link: function (scope, element, attrs) {
    var dd = angular.element('<dd> here is attrs.insertDd or scope.item.dd_value </dd>');
    dd.insertAfter(element);
    $compile(dd)(scope);
  }
});

Answer 1

在指令上设置scope 以传递每个item：

app.directive('insertDd', function ($compile) {
    return {
        restrict: 'A',
        scope: {
            item: '=insertDd'
        },
        link: function (scope, element, attrs) {
            // ng-repeat always inserts the next item directly after the last one,
            // so this element will actually be before the <dt> we just added
            if (element.next().length) {
                element.next().after(element);
            }

            var dd = angular.element('<dd> here is {{item.dd_value}} or {{item.dt_value}} </dd>');

            element.after(dd);
            $compile(dd)(scope);
        }
    };
});

http://jsfiddle.net/sFEf5/2/