Use Angular Directive attributes in it's template

http://stackoverflow.com/questions/17345302/use-angular-directive-attributes-in-its-template

by moderndegree

HTML

<div ng-app="myApp">
    <div class="tooltip-icon" data-my-tooltip="click" data-tooltip-title="foo" data-tooltip-content="test content"></div>
</div>

JavaScript

angular.module('myApp', []).
directive('myTooltip', function ($log) {
    // allowed event listeners
    var allowedListeners = ["click"];
    return {
        restrict: 'A',
        template:   '<div class="tooltip-title">{{tooltipTitle}}</div>' +
                    '<div class="tooltip-content">' +
                    '{{tooltipContent}}</div>',
        scope: {
            tooltipTitle: '@tooltipTitle',
            tooltipContent: '@tooltipContent'
        },
        link: function (scope, elm, attrs) {
            if (allowedListeners.indexOf(attrs.myTooltip) != -1) {
                elm.bind(attrs.myTooltip, function () {
                    $log.info('clicked');
                });
            }

        }
    };
});