How to pass value to Angular directive through class attribute?

Question

I wrote the following directive that creates a Twitter card when you pass the tweet id.

angular.module('app')
     .directive('tweetCard',function () {
          return {
            transclude:true,
            template: '<ng-transclude></ng-transclude>',
            restrict: 'AEC',
            controller:function($scope, $element, $attrs){
               twttr.widgets.createTweet($attrs.tweetId,$element[0], 
                   {theme:$attrs.theme?$attrs.theme:'light'})
                   .then(function(){
                       $element.find('ng-transclude').remove();
                   });
            }
     };
});

This directive works fine if I use it as below.

<tweet-card tweet-id="639487026052644867"></tweet-card>
<div tweet-card tweet-id="639487026052644867"></div>

Although the reason I created this directive is the ability to put this tag on my wordpress.com blog. Having tried it, it seems that wordpress does not allow the unkown tags that I expected. But they also do not allow the use of unknown attributes or data- * attributes in the message. So I tried to put everything in the class attribute, as you see below.

<div class="tweet-card tweet-id:639526277649534976;"></div>

Unfortunately, this did not work, and I tried to play with him. I can extend this directive to check if the tweetCard attribute contains such an identifier.

angular.module('app')
     .directive('tweetCard',function () {
          return {
            transclude:true,
            template: '<ng-transclude></ng-transclude>',
            restrict: 'AEC',
            controller:function($scope, $element, $attrs){
               var id = $attrs.tweetId?$attrs.tweetId:$attrs.tweetCard;
               twttr.widgets.createTweet(id,$element[0],
                   {theme:$attrs.theme?$attrs.theme:'light'})
                   .then(function(){
                       $element.find('ng-transclude').remove();
                   });
            }
     };
});

With the following html.

<div class="tweet-card:639526277649534976;"></div>

, , , . - , ?

Answer 1

AngularJS , , angular. (<span class="my-dir: exp;"></span>) .

function classNameToObj(className) {
    //different attributes are separated by semicolons
    var attributes = className.split(';');
    var obj = {};
    for (var i = 0; i < attributes.length; i++) {
        var attribute = attributes[i];
        //key-values separated by colon
        var splittedAttr = attribute.split(':');
        obj[splittedAttr[0].trim()] = splittedAttr[1].trim();
    }
    return obj;
}

, HTML , :

<div class="tweet-card:639526277649534976; theme:dark"></div>

:

var id = $attrs.tweetCard;
var attributes = classNameToObj($attrs.class);
var theme = attributes.theme;
twttr.widgets.createTweet(id, $element[0], {
        theme: theme || 'light'
    })
    .then(function() {
        $element.find('ng-transclude').remove();
    });

plunkr