The issue at hand:
There appears to be a major gap between simple directives and the same directives used in ngRepeat, especially when using display: inline-block in the Chrome browser.
- I can add an unlimited number of directives and everything works fine:
<tile></tile>
<tile></tile>
<tile></tile>
<tile></tile>
- However, if I include something like
ngRepeat, the layout breaks:
<tile></tile>
<tile></tile>
<tile></tile>
<!-- There is suddenly a large gap here -->
<tile ng-repeat="t in [0, 1, 2, 3]"></tile>
Here is the code for the directive:
.directive('tile', function () {
return {
restrict: 'E',
scope: {},
replace: true,
template: '<div class="tile"></div>',
controller: function ($scope) {},
link: function (scope) {}
};
})
The CSS class for the directive .tile:
.tile {
background-color: red;
height: 70px;
width: 70px;
margin: 4px 2px;
display: inline-block;
}
So, why is this happening? What could be causing it, and how can it be resolved?