Skip to content Skip to sidebar Skip to footer

How To Write Custom 'row' And 'col' Element For Angularjs

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

Solution 1:

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().

Solution 2:

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

Post a Comment for "How To Write Custom 'row' And 'col' Element For Angularjs"