diff --git a/angular-deckgrid.js b/angular-deckgrid.js
index 3a27108..bcd2d80 100644
--- a/angular-deckgrid.js
+++ b/angular-deckgrid.js
@@ -42,8 +42,10 @@ angular.module('akoenig.deckgrid').factory('DeckgridDescriptor', [
'Deckgrid',
'$templateCache',
+ '$window',
+ '$q',
- function initialize (Deckgrid, $templateCache) {
+ function initialize (Deckgrid, $templateCache, $window, $q) {
'use strict';
@@ -96,7 +98,10 @@ angular.module('akoenig.deckgrid').factory('DeckgridDescriptor', [
*
*/
Descriptor.prototype.$$link = function $$link (scope, elem, attrs, nullController, transclude) {
- var templateKey = 'deckgrid/innerHtmlTemplate' + (++this.$$templateKeyIndex);
+ var templateKey = 'deckgrid/innerHtmlTemplate' + (++this.$$templateKeyIndex),
+ self = this,
+ styleReady = $q.defer(),
+ domWatch;
scope.$on('$destroy', this.$$destroy.bind(this));
@@ -135,7 +140,19 @@ angular.module('akoenig.deckgrid').factory('DeckgridDescriptor', [
scope.mother = scope.$parent;
- this.$$deckgrid = Deckgrid.create(scope, elem[0]);
+ // Wait for style to be ready on deckgrid element
+ domWatch = scope.$watch(function() {
+ return $window.getComputedStyle(elem[0], ':before').content;
+ }, function(content) {
+ if (content !== '') {
+ styleReady.resolve();
+ // Clear the watcher once element is initialized
+ domWatch();
+ }
+ });
+ styleReady.promise.then(function() {
+ self.$$deckgrid = Deckgrid.create(scope, elem[0]);
+ });
};
return {
diff --git a/angular-deckgrid.min.js b/angular-deckgrid.min.js
index 56373a7..814fa9e 100644
--- a/angular-deckgrid.min.js
+++ b/angular-deckgrid.min.js
@@ -1,2 +1,2 @@
/*! angular-deckgrid (v0.4.1) - Copyright: 2013 - 2014, André König (andre.koenig@posteo.de) - MIT */
-angular.module("akoenig.deckgrid",[]),angular.module("akoenig.deckgrid").directive("deckgrid",["DeckgridDescriptor",function(a){"use strict";return a.create()}]),angular.module("akoenig.deckgrid").factory("DeckgridDescriptor",["Deckgrid","$templateCache",function(a,b){"use strict";function c(){this.restrict="AE",this.template='
',this.scope={model:"=source"},this.$$deckgrid=null,this.transclude=!0,this.link=this.$$link.bind(this),this.$$templateKeyIndex=0}return c.prototype.$$destroy=function(){this.$$deckgrid.destroy()},c.prototype.$$link=function(c,d,e,f,g){var h="deckgrid/innerHtmlTemplate"+ ++this.$$templateKeyIndex;c.$on("$destroy",this.$$destroy.bind(this)),void 0===e.cardtemplate?(void 0===e.cardtemplatestring?g(c,function(a){var c,d=[],e=0,f=a.length;for(e;f>e;e+=1)c=a[e].outerHTML,void 0!==c&&d.push(c);b.put(h,d.join())}):b.put(h,d.attr("cardtemplatestring")),c.cardTemplate=h):c.cardTemplate=e.cardtemplate,c.mother=c.$parent,this.$$deckgrid=a.create(c,d[0])},{create:function(){return new c}}}]),angular.module("akoenig.deckgrid").factory("Deckgrid",["$window","$log",function(a,b){"use strict";function c(a,b){var c,d=this;this.$$elem=b,this.$$watchers=[],this.$$scope=a,this.$$scope.columns=[],this.$$scope.layout=this.$$getLayout(),this.$$createColumns(),c=this.$$scope.$watch("model",this.$$onModelChange.bind(this),!0),this.$$watchers.push(c),angular.forEach(d.$$getMediaQueries(),function(a){function b(){a.removeListener(d.$$onMediaQueryChange.bind(d))}a.addListener(d.$$onMediaQueryChange.bind(d)),d.$$watchers.push(b)})}return c.prototype.$$getMediaQueries=function(){function b(a){try{return a.sheet.cssRules||[]}catch(b){return[]}}function c(a){var b=/\[(\w*-)?deckgrid\]::?before/g,c=0,d="";if(!a.media||angular.isUndefined(a.cssRules))return!1;for(c=a.cssRules.length-1;c>=0;c-=1)if(d=a.cssRules[c].selectorText,angular.isDefined(d)&&d.match(b))return!0;return!1}var d=[],e=[];return d=Array.prototype.concat.call(Array.prototype.slice.call(document.querySelectorAll("style[type='text/css']")),Array.prototype.slice.call(document.querySelectorAll("link[rel='stylesheet']"))),angular.forEach(d,function(d){var f=b(d);angular.forEach(f,function(b){c(b)&&e.push(a.matchMedia(b.media.mediaText))})}),e},c.prototype.$$createColumns=function(){var a=this;return this.$$scope.layout?(this.$$scope.columns=[],void angular.forEach(this.$$scope.model,function(b,c){var d=c%a.$$scope.layout.columns|0;a.$$scope.columns[d]||(a.$$scope.columns[d]=[]),b.$index=c,a.$$scope.columns[d].push(b)})):b.error("angular-deckgrid: No CSS configuration found (see https://github.com/akoenig/angular-deckgrid#the-grid-configuration)")},c.prototype.$$getLayout=function(){var b,c=a.getComputedStyle(this.$$elem,":before").content;return c&&(c=c.replace(/'/g,""),c=c.replace(/"/g,""),c=c.split(" "),2===c.length&&(b={},b.columns=0|c[0],b.classList=c[1].replace(/\./g," ").trim())),b},c.prototype.$$onMediaQueryChange=function(){var a=this,b=this.$$getLayout();b.columns!==this.$$scope.layout.columns&&(a.$$scope.layout=b,a.$$scope.$apply(function(){a.$$createColumns()}))},c.prototype.$$onModelChange=function(a,b){var c=this;a=a||[],b=b||[],b.length!==a.length&&c.$$createColumns()},c.prototype.destroy=function(){var a=this.$$watchers.length-1;for(a;a>=0;a-=1)this.$$watchers[a]()},{create:function(a,b){return new c(a,b)}}}]);
\ No newline at end of file
+angular.module("akoenig.deckgrid",[]),angular.module("akoenig.deckgrid").directive("deckgrid",["DeckgridDescriptor",function(a){"use strict";return a.create()}]),angular.module("akoenig.deckgrid").factory("DeckgridDescriptor",["Deckgrid","$templateCache","$window","$q",function(a,b,c,d){"use strict";function e(){this.restrict="AE",this.template='',this.scope={model:"=source"},this.$$deckgrid=null,this.transclude=!0,this.link=this.$$link.bind(this),this.$$templateKeyIndex=0}return e.prototype.$$destroy=function(){this.$$deckgrid.destroy()},e.prototype.$$link=function(e,f,g,h,i){var j,k="deckgrid/innerHtmlTemplate"+ ++this.$$templateKeyIndex,l=this,m=d.defer();e.$on("$destroy",this.$$destroy.bind(this)),void 0===g.cardtemplate?(void 0===g.cardtemplatestring?i(e,function(a){var c,d=[],e=0,f=a.length;for(e;f>e;e+=1)c=a[e].outerHTML,void 0!==c&&d.push(c);b.put(k,d.join())}):b.put(k,f.attr("cardtemplatestring")),e.cardTemplate=k):e.cardTemplate=g.cardtemplate,e.mother=e.$parent,j=e.$watch(function(){return c.getComputedStyle(f[0],":before").content},function(a){""!==a&&(m.resolve(),j())}),m.promise.then(function(){l.$$deckgrid=a.create(e,f[0])})},{create:function(){return new e}}}]),angular.module("akoenig.deckgrid").factory("Deckgrid",["$window","$log",function(a,b){"use strict";function c(a,b){var c,d=this;this.$$elem=b,this.$$watchers=[],this.$$scope=a,this.$$scope.columns=[],this.$$scope.layout=this.$$getLayout(),this.$$createColumns(),c=this.$$scope.$watch("model",this.$$onModelChange.bind(this),!0),this.$$watchers.push(c),angular.forEach(d.$$getMediaQueries(),function(a){function b(){a.removeListener(d.$$onMediaQueryChange.bind(d))}a.addListener(d.$$onMediaQueryChange.bind(d)),d.$$watchers.push(b)})}return c.prototype.$$getMediaQueries=function(){function b(a){try{return a.sheet.cssRules||[]}catch(b){return[]}}function c(a){var b=/\[(\w*-)?deckgrid\]::?before/g,c=0,d="";if(!a.media||angular.isUndefined(a.cssRules))return!1;for(c=a.cssRules.length-1;c>=0;c-=1)if(d=a.cssRules[c].selectorText,angular.isDefined(d)&&d.match(b))return!0;return!1}var d=[],e=[];return d=Array.prototype.concat.call(Array.prototype.slice.call(document.querySelectorAll("style[type='text/css']")),Array.prototype.slice.call(document.querySelectorAll("link[rel='stylesheet']"))),angular.forEach(d,function(d){var f=b(d);angular.forEach(f,function(b){c(b)&&e.push(a.matchMedia(b.media.mediaText))})}),e},c.prototype.$$createColumns=function(){var a=this;return this.$$scope.layout?(this.$$scope.columns=[],void angular.forEach(this.$$scope.model,function(b,c){var d=c%a.$$scope.layout.columns|0;a.$$scope.columns[d]||(a.$$scope.columns[d]=[]),b.$index=c,a.$$scope.columns[d].push(b)})):b.error("angular-deckgrid: No CSS configuration found (see https://github.com/akoenig/angular-deckgrid#the-grid-configuration)")},c.prototype.$$getLayout=function(){var b,c=a.getComputedStyle(this.$$elem,":before").content;return c&&(c=c.replace(/'/g,""),c=c.replace(/"/g,""),c=c.split(" "),2===c.length&&(b={},b.columns=0|c[0],b.classList=c[1].replace(/\./g," ").trim())),b},c.prototype.$$onMediaQueryChange=function(){var a=this,b=this.$$getLayout();b.columns!==this.$$scope.layout.columns&&(a.$$scope.layout=b,a.$$scope.$apply(function(){a.$$createColumns()}))},c.prototype.$$onModelChange=function(a,b){var c=this;a=a||[],b=b||[],b.length!==a.length&&c.$$createColumns()},c.prototype.destroy=function(){var a=this.$$watchers.length-1;for(a;a>=0;a-=1)this.$$watchers[a]()},{create:function(a,b){return new c(a,b)}}}]);
\ No newline at end of file
diff --git a/src/descriptor.js b/src/descriptor.js
index 272a8ab..4760a46 100644
--- a/src/descriptor.js
+++ b/src/descriptor.js
@@ -15,8 +15,10 @@ angular.module('akoenig.deckgrid').factory('DeckgridDescriptor', [
'Deckgrid',
'$templateCache',
+ '$window',
+ '$q',
- function initialize (Deckgrid, $templateCache) {
+ function initialize (Deckgrid, $templateCache, $window, $q) {
'use strict';
@@ -69,7 +71,10 @@ angular.module('akoenig.deckgrid').factory('DeckgridDescriptor', [
*
*/
Descriptor.prototype.$$link = function $$link (scope, elem, attrs, nullController, transclude) {
- var templateKey = 'deckgrid/innerHtmlTemplate' + (++this.$$templateKeyIndex);
+ var templateKey = 'deckgrid/innerHtmlTemplate' + (++this.$$templateKeyIndex),
+ self = this,
+ styleReady = $q.defer(),
+ domWatch;
scope.$on('$destroy', this.$$destroy.bind(this));
@@ -108,7 +113,19 @@ angular.module('akoenig.deckgrid').factory('DeckgridDescriptor', [
scope.mother = scope.$parent;
- this.$$deckgrid = Deckgrid.create(scope, elem[0]);
+ // Wait for style to be ready on deckgrid element
+ domWatch = scope.$watch(function() {
+ return $window.getComputedStyle(elem[0], ':before').content;
+ }, function(content) {
+ if (content !== '') {
+ styleReady.resolve();
+ // Clear the watcher once element is initialized
+ domWatch();
+ }
+ });
+ styleReady.promise.then(function() {
+ self.$$deckgrid = Deckgrid.create(scope, elem[0]);
+ });
};
return {