3

我正在尝试围绕此处概述的网格元素编写一些 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(){
    返回 {
      限制：'E'，
      编译：函数（tElement，attrs）{
        var 内容 = tElement.children();
        tElement.replaceWith(
          $('', {class: 'row',}).append(content));
      }
    }
  });

只是什么都不做。失败的尝试显示在这里 - http://jsfiddle.net/ZVuRQ/

请帮忙！

4

2 回答 2

7

我希望不要使用 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()。

于 2013-01-01T00:24:26.280 回答
1

您的示例中根本不需要 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
    };
});
于 2012-12-31T22:41:15.147 回答