如何为angularjs编写自定义'row'和'col'元素

Question

我正在尝试围绕这里概述的网格元素编写一个小的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/

请帮忙!

Answer 1

我希望不要使用ng-transclude,因为我发现它增加了一个额外的范围.

这是一个不使用ng-transclude的指令:

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);
        }
    }
});

您可能希望使用tElement.contents()而不是tElement.children().