Как передать значение в директиву Angular через атрибут class?

Я написал следующую директиву, которая создает twitter-карту, когда вы передаете идентификатор твита.

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();
                   });
            }
     };
});
Эта директива отлично работает, если я использую ее как ниже. 
<tweet-card tweet-id="639487026052644867"></tweet-card>
<div tweet-card tweet-id="639487026052644867"></div>

Хотя, причина, по которой я создал эту директиву, заключается в том, что я мог бы поместить этот тег в свой wordpress.com блог. После того, как я попробовал его, кажется, wordpress не позволяет неизвестные теги, которые я ожидал. Но они также не допускают неизвестных атрибутов или атрибутов данных в посте. Так что я постарался выложить все в классе атрибут, как вы видите ниже.

<div class="tweet-card tweet-id:639526277649534976;"></div>
К сожалению, это не работает, и я попробовал поиграть с ним. Я могу расширить директиву, чтобы также проверить, содержит ли атрибут tweetCard такой идентификатор. 
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();
                   });
            }
     };
});

Со следующим html-кодом.

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

Хотя мне не нравится этот обходной путь,и я не могу передать другой атрибут, такой как атрибут темы. Кто-нибудь знает, как передать несколько переменных через атрибут класса в директиву?

1 4
javascript angularjs directive wordpress

1 ответ:

Я посмотрел на AngularJS docs, чтобы найти способ использовать несколько переменных через класс, но ничего не нашел, поэтому я написал функцию для преобразования имени класса в синтаксисе angular reads. (<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

2