Как написать пользовательский элемент 'row' и 'col' для angularjs

Я пытаюсь написать немного dsl вокруг элементов сетки, описанных здесь: http://foundation.zurb.com/docs/grid.php

в основном, что я хочу сделать, это

<row>
  <column two mobile-one>{{myText}}</col>
  <column four centered mobile-three><input type="text" ng-model="myText"></input></col>
</row>

преобразуется в:

<div class="row">
  <div class="columns two mobile-one">{{myText}}</div>
  <div class= "columns four centered mobile-three"><input type="text" ng-model="myText"></input></div>
</div>

В идеале я хочу написать что-то, что может принимать произвольное вложение: row → col → row → col → row.....

У меня возникли проблемы с первым шагом вправо - вложение элементов, потому что я не могу понять, как получить дочерние элементы в другой шаблон без серьезного компрометации процесса компиляции.

  var app = angular.module('lapis', []);

  app.directive('row', function(){
    return {
      restrict: 'E',
      compile: function(tElement, attrs) {
        var content = tElement.children();
        tElement.replaceWith(
          $('', {class: 'row',}).append(content));
      }
    }
  });

просто ничего не делает. Здесь показана неудачная попытка - http://jsfiddle.net/ZVuRQ/

Пожалуйста, помогите!

Ответы

app.directive('row', function() {
    return {
        restrict: 'E',
        compile: function(tElement, attrs) {
            var content = angular.element('<div class="row"></div>')
            content.append(tElement.children());
            tElement.replaceWith(content);
        }
    }
});

var app = angular.module('lapis', []);


app.directive('row', function(){
    return {
      restrict: 'E',
      template: '<div class="row" ng-transclude></div>',
      transclude: true,
      replace: true
    };
});