AngularJS mnu directive

by luckylooke

HTML

<div ng-app="myApp">
    <div style="margin:100px" 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', [])
    .service('mnuBtnsService',

function mnuBtnsService() {
    var sets = {
        basic: [{
            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')
            }
        }]
    };
    this.getSets = function (query) {
        var queries = query.split('+'),
            len = queries.length,
            result = [];
        for (var i = 0; i <= len; i++) {
            result = result.concat(sets[queries[i]]);
        }
        return result;
    };
})
    .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');
...