JSFiddle - React, Tailwind, and code Playground

by Yang Tyler

HTML

<script src="https://code.angularjs.org/1.2.26/angular.js"></script>
<div ng-app="MyApp" class="app">
    <div ng-controller="MainController" class="main-ctner">
        <div centery="button" centery-num="4" class="btn-ctner">
            <button ng-repeat="btn in btns" class="btn">{{btn.name}}</button>
        </div>
    </div>
</div>

CSS

.app{
    width: 500px;
    border: 1px solid #ccc;
}
.main-ctner{
    background-color: #ccc;
    width: 100%;
}
.btn-ctner{
    width:500px;
    
    padding-left: 30px;
    background-color: #f45;
}
.btn{
    width:auto;
    padding: 5px 10px;
    margin-top:10px;
}

JavaScript

var myApp = angular.module("MyApp", []);
myApp.controller("MainController", function($scope){
    $scope.btns = [
        { name: "ab"},
        { name: "abc"},
        { name: "bdefg"},
        { name: "absadf"},
        { name: "abba"},
        { name: "abwerwer"},
        { name: "abadsfasdf"},
        { name: "absadf"},
        { name: "abadfadasdf"},
        { name: "absadfasdfasf"},
    ];
});
myApp.directive("centery", function(){
    function linkFunc(scope, element, attrs){
        var centeryType = attrs["centery"];
        var centeryNum = attrs["centeryNum"];
        element.ready( function(){//trigger after ready(e.g ngRepeat)
            console.log(element.css('background-color'));
            console.log(element.css('padding-left'));
            eles = element.find(centeryType);
            
            //console.log(eles[0].offsetWidth);
        });
    }    
    return {
        link: linkFunc
    }
});