Javascript 如何通过class属性将值传递给Angular指令？

我已经编写了以下指令，当您传递tweet的id时，它会创建一个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();
                   });
            }
     };
});

angular.module（'app'）
.指令（'tweetCard'，函数（）{
返回{
是的，
模板：“”，
限制：“AEC”，
控制器：函数（$scope、$element、$attrs）{
twttr.widgets.createTweet（$attrs.tweetId，$element[0]，
{theme:$attrs.theme？$attrs.theme:'light'}）
.然后（函数（）{
$element.find（'ng-transclude'）.remove（）；
});
}
};
});

如果我在下面使用这个指令，它会非常有效

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

尽管如此，我创建此指令的原因是我可以将此标记放入我的wordpress.com博客。 在尝试之后，wordpress似乎不允许未知的标签，这是我所期望的。 但它们也不允许在帖子中使用未知属性或数据-*属性。 因此，我尝试将所有内容都放在class属性中，如下所示

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

不幸的是，这不起作用，我试着摆弄它。 我可以扩展指令来检查tweetCard属性是否包含这样的id

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

angular.module（'app'）
.指令（'tweetCard'，函数（）{
返回{
是的，
模板：“”，
限制：“AEC”，
控制器：函数（$scope、$element、$attrs）{
var id=$attrs.tweetId？$attrs.tweetId:$attrs.tweetCard；
twttr.widgets.createTweet（id$element[0]，
{theme:$attrs.theme？$attrs.theme:'light'}）
.然后（函数（）{
$element.find（'ng-transclude'）.remove（）；
});
}
};
});

使用下面的html

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

不过，我不喜欢这种解决方法，而且我不能传递另一个属性，比如theme属性。

---

有人知道如何通过class属性将多个变量传递给指令吗？

我查看了AngularJS文档，寻找通过class使用多个变量的方法，但没有找到任何结果，因此我编写了一个函数来转换语法angular reads中的类名。（

）到对象

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

---

这里有一个工作

我忘了提到，我使用wordpress.com来写博客文章，并使用wordpress.com api在我的实际angular博客中显示它。如果你想测试，我使用twitter widgets库来创建推文，我认为这是解决问题的最好方法，谢谢！

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