how to write custom 'row' and 'col' element for angularjs

Question

I'm trying to write a little dsl around the grid elements outlined here: http://foundation.zurb.com/docs/grid.php

basically what I wish to do is to

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

transform into:

<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>

Ideally, I wish to write something that can take arbitrary nesting: row -> col -> row -> col -> row.....

I am having trouble getting the first step right - nesting the elements because I can't quite figure how how to get the child elements into another template without seriously compromising the compilation process.

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

just does not do anything. The failed attempt is shown here - http://jsfiddle.net/ZVuRQ/

Please help!

col is an HTML element, so you probably shouldn't/can't use it as a directive name. — Mark Rajcok
– Mark Rajcok, Commented Dec 31, 2012 at 23:29

Mark Rajcok · Accepted Answer · 2013-01-01 15:51:03Z

7

I was hoping not to use ng-transclude because I found that it added an additional scope.

Here is a directive that does not use 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);
        }
    }
});

You may want to use tElement.contents() instead of tElement.children().

edited Jan 1, 2013 at 15:51

answered Jan 1, 2013 at 0:24

Mark Rajcok

365k114 gold badges501 silver badges494 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

asgoth · Accepted Answer · 2013-01-01 00:33:16Z

1

You don't need jquery at all in your example (but you need to include it on your 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
    };
});

edited Jan 1, 2013 at 0:33

answered Dec 31, 2012 at 22:41

asgoth

35.8k12 gold badges91 silver badges98 bronze badges

2 Comments

Mark Rajcok Over a year ago

Use <div class="row" ng-transclude></div> to have one less nested div.

zcaudate Over a year ago

thanks! I was hoping not to use ng-transclude because I found that it added an additional scope. I just want something simple because I found that css works better that way

Collectives™ on Stack Overflow

how to write custom 'row' and 'col' element for angularjs

2 Answers 2

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related