自定义 directive ay-box

工作过程中需要做一个类似下面图上的2行4列的导航栏，遂自己谢了directive，方便工作中用，还不是很美观。

他支持 3列、4列、5列。

directive.js 

/**
 * ay-box
 * html:
 * <ay-box col="4" content="{{vm.content}}" ></ay-box>
 * js:
 * var obj = [
 * {icon:'ion-heart', title:'a', state:'main'},
 * {icon:'ion-ios-help', title:'b', state:'main'},
 * {icon:'ion-ios-star', title:'c', state:'main'},
 * {icon:'ion-ios-reload', title:'d', state:'main'},
 * {icon:'ion-ios-refresh', title:'e', state:'main'},
 * {icon:'ion-ios-download', title:'f', state:'main'},
 * {icon:'ion-ios-browsers', title:'g', state:'main'}
 * ];
 * vm.content = JSON.stringify(obj)
 */
var drt = angular.module('starter.directive', []);
drt.directive('ayBox',function(){
    return {
        restrict:'EA',
        templateUrl:'view/directives/ayBox.html',
        scope:{
            content:'@',
            col:'@'
        },
        controller:function($scope,$state){
            function chageTo2d(arr,col){
                var ans=[];
                var r, c,len = arr.length;
                for(var i= 0;i<len; i++){
                    r = parseInt(i/col);
                    c = (i%col);
                    ans[r] = ans[r] || [];
                    ans[r][c] = arr[i];
                }
                while(c+1<col){
                    ans[r][++c]={};
                }
                return ans;
            }
            var styleRow3 = {
                'background-color': 'white',
                'margin': '0 0',
                'padding-bottom': '29%',
                'width': '25%',
                'height':'0',

                'border':'solid',
                'border-width': '1px',
                'border-color': 'gainsboro'
            };
            var styleRow4 = Object.assign({},styleRow3);
            styleRow4['padding-bottom'] = '24%';
            var styleRow5 = Object.assign({},styleRow3);
            styleRow5['padding-bottom'] = '18%';
            var styleDiv3 = {'padding-top': '20%'};
            var styleDiv4 = {'padding-top': '18%'};
            var styleDiv5 = {'padding-top': '3%'};

            var vm = $scope.vm = {};
            if($scope.col==3){
                vm.styleRow = styleRow3;
                vm.styleDiv = styleDiv3;
            }else if($scope.col==4){
                vm.styleRow = styleRow4;
                vm.styleDiv = styleDiv4;
            }else if($scope.col==5){
                vm.styleRow = styleRow5;
                vm.styleDiv = styleDiv5;
            }else{
                console.log('error! ay-box col must is one of  3,4,5');
                return ;
            }

            var COLORS = ['Tomato','SkyBlue','green','orange','PaleGreen'];

            var content = eval($scope.content);
            content.forEach(function(e,i){
                e.color =  COLORS[i%5];
            });
            vm.rows = chageTo2d(content, $scope.col);
            vm.go = function(name){
                $state.go(name);
            }
        }
    }
});

ayBox.html：

<div class="row" style="padding:0;" ng-repeat="row in vm.rows track by $index">
  <div class="col" ng-style="vm.styleRow" ng-click="vm.go(item.state)" ng-repeat="item in row track by $index">
    <div align="center" ng-style="vm.styleDiv">
      <i class="icon {{item.icon}}" style="font-size: 38px;color: {{item.color}}"></i><br>
      {{item.title}}
    </div>
  </div>
</div>

controller中：

var obj = [
        {icon:'ion-heart', title:'快速注册', state:'tab.signupFront'},
        {icon:'ion-ios-help', title:'b', state:'main'},
        {icon:'ion-ios-star', title:'c', state:'main'},
        {icon:'ion-ios-reload', title:'d', state:'main'},
        {icon:'ion-ios-refresh', title:'e', state:'main'},
        {icon:'ion-ios-download', title:'f', state:'main'},
        {icon:'ion-ios-browsers', title:'g', state:'main'},
        {icon:'ion-ios-browsers', title:'g', state:'main'}
    ];
    $scope.content = JSON.stringify(obj)