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>

理想的には、任意のネストをとることができるものを書きたいと思います：行->列->行->列->行....。

コンパイルプロセスを大幅に損なうことなく子要素を別のテンプレートに取り込む方法を完全に理解できないため、最初のステップを正しく行うのに問題があります。要素をネストします。

  var app = angle.module（'lapis'、[]）;

  app.directive（'row'、function（）{
    戻る {
      制限：'E'、
      コンパイル：function（tElement、attrs）{
        var content = tElement.children（）;
        tElement.replaceWith（
          $（''、{クラス：'行'、}）。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.children() の代わりに tElement.contents() を使用することもできます。

于 2013-01-01T00:24:26.280 に答える
1

この例ではjqueryはまったく必要ありません（ただし、page / 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 に答える