AngularJS mnu directive

by luckylooke

HTML

<div ng-app="myApp">
    <div style="margin:100px" ng-controller="appCtrl" mnu>mnu</div>
</div>

CSS

.mnu-root {
    position: relative;
}
.ui {
    background: yellow;
    width:1em;
    height:1em;
    text-align: center;
    position:absolute;
}
.circle {
    border-radius: 50%;
}
.mnubtn {
    -moz-box-shadow:inset 0em 0.125em 0em -0.250em #fff0a6;
    -webkit-box-shadow:inset 0em 0.125em 0em -0.250em #fff0a6;
    box-shadow:inset 0em 0.125em 0em -0.250em #fff0a6;
    background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ffff00), color-stop(1, #fab32f));
    background:-moz-linear-gradient(center top, #ffff00 5%, #fab32f 100%);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffff00', endColorstr='#fab32f');
    background-color:#ffff00;
    -webkit-border-top-left-radius:1.250em;
    -moz-border-radius-topleft:1.250em;
    border-top-left-radius:1.250em;
    -webkit-border-top-right-radius:1.250em;
    -moz-border-radius-topright:1.250em;
    border-top-right-radius:1.250em;
    -webkit-border-bottom-right-radius:1.250em;
    -moz-border-radius-bottomright:1.250em;
    border-bottom-right-radius:1.250em;
    -webkit-border-bottom-left-radius:1.250em;
    -moz-border-radius-bottomleft:1.250em;
    border-bottom-left-radius:1.250em;
    text-indent:0em;
    border:0.1em solid #8a8483;
    display:inline-block;
    color:#6b6a6a;
    font-family:Arial Black;
    font-size:1.813em;
    font-weight:bold;
    font-style:normal;
    height:1em;
    line-height:1em;
    width:1em;
    text-decoration:none;
    text-align:center;
    text-shadow:0.03em 0.03em 0em #f0ecc0;
}
.mnubtn:hover {
    background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #fab32f), color-stop(1, #ffff00));
    background:-moz-linear-gradient(center top, #fab32f 5%, #ffff00 100%);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fab32f', endColorstr='#ffff00');
    background-color:#fab32f;
}
.mnubtn:active {
    position:relative;
    top:0.063em;

JavaScript

var myApp = angular.module('myApp', [])
    .controller('appCtrl', function ($scope, $rootScope) {
    $scope.buttons = [{
        char: "+",
        charStyle: "",
        charClass: "",
        btnStyle: "",
        btnClass: "mnubtn",
        callback: function () {
            alert('+')
        }
    }, {
        char: "a",
        charStyle: "",
        charClass: "",
        btnStyle: "top:-15px; left:-20px; background:red;",
        btnClass: "ui circle",
        callback: function () {
            alert('a')
        }
    }, {
        char: "B",
        charStyle: "",
        charClass: "",
        btnStyle: "top:15px; left:40px;",
        btnClass: "ui circle",
        callback: function () {
            alert('b')
        }
    }];
})
    .directive('mnu', function directive() {
    return {
        replace: true,
        template: '<div class="mnu-root">\
<div ng-repeat="button in buttons" style="{{button.btnStyle}}" class="{{button.btnClass}}" index="{{$index}}">\
                        <span style="{{button.charStyle}}" class=" {{button.charClass}}" index="{{$index}}">\
                            {{button.char}}\
                        </span>\
                    </div>\
                   </div>',
        link: function (scope, iE) {
            //console.log(arguments);
        if(!scope.buttons){
        console.log("ERROR directive mnu: no buttons provided");
        return;
    };
            iE.on("click", function (e) {
                var elm = angular.element(e.target),
                    index = elm.attr('index');
                scope.buttons[index].callback(e, elm);
            })
        }
    };
});