如何通过class属性将值传递给Angular Directive？

Question

I have written the following directive that creates a twitter card when you pass the id of the tweet.

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 great if I use it as beneath.

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

Though, the reason I created this directive is so I could put this tag into my wordpress.com blog. After trying it, it seems wordpress doesn't allow unkown tags, which I expected. But they also don't allow unknown attributes, or data-* attributes in a post. So I tried to put everything in the class attribute as you see below.

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

Unfortunately, this doesn't work and I tried fiddling with it. I can extend the directive to also check if the tweetCard attribute contains the id like this.

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>

Though, I don't like this workaround, and I can't pass another attribute like the theme attribute. Anyone an idea how to pass multiple variables through the class attribute to a directive?

Answer 1

I looked at the AngularJS docs for a way to use multiple variables via class but found nothing so I wrote a function to convert the class name in the syntax angular reads. ( <span class="my-dir: exp;"></span> ) to an object.

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;
}

This way your HTML can pass both the tweet ID and the theme:

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

And your directive can create the widget like this:

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();
    });

Here's a working plunkr