Angular: Duplicate Call to a Directive

http://angularjs.org/

by ud3323

HTML

<script src="http://code.angularjs.org/angular-1.0.1.js"></script>
<div ng-controller="MyCtrl">
    <center>
        <button-menu options="options1"></button-menu>
        <button-menu options="options2"></button-menu>
    </center>
</div>

CSS

.armadaDropDown {
    float:left;
    text-align: center;
    background-color: #6c90b8;
    padding: 3px;
    border:1px red solid;
    color: white;
    width: 100px;
    height: 30px;
}

JavaScript

var myApp = angular.module('myApp', []);

// Controller
function MyCtrl($scope) {

    // Button Options        
    $scope.options1 = {
        id: "1",
        buttonTemplate: "<span style=\"font-size:16pt\">Button 1</span>"
    };

    $scope.options2 = {
        id: "2",
        buttonTemplate: "<span style=\"font-size:10pt\">Button 2</span>"
    };
}

// Directive
myApp.directive('buttonMenu', function ($compile, $templateCache) {
    return {
        restrict: 'E',
        require: '?ngModel',
        replace: true,
        transclude: false,
        scope: {
            buttonOptions: '=options'
        },
        template: "<span></span>",
        link: function (scope, element, attrs, ngModelCtrl) {
            //scope.buttonOptions = scope[attrs.options];
            element.append($compile($templateCache.get('templateButton.html'))(scope));
        }
    };
}).directive('customButtonTemplate', function ($compile, $timeout) {
    return {
        restrict: 'E',
        require: '?ngModel',
        replace: true,
        transclude: false,
        link: function (scope, element, attrs, ngModelCtrl) {
            $timeout(function () {
                var buttonTemplate = angular.isDefined(attrs.template) ? attrs.template : '';
                // Append the HTML Layout in the Element
                element.append($compile(buttonTemplate)(scope));
            }, 1);
        }
    };
}).run(["$templateCache", function ($templateCache) {
    $templateCache.put("templateButton.html",
        "<div id=\"button{{buttonOptions.id}}\" class=\"armadaDropDown\"> " +
        "     <span>" +
        "         <custom-button-template template='{{buttonOptions.buttonTemplate}}' /> " +
        "     </span>" +
        "</div> ");
}]);