如何為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（）。

Answer 2

在您的示例中根本不需要jquery（但是您需要將它包含在頁面/ jsFiddle中）：

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


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