向指令元素添加指令属性 [英] Add Directive Attribute to Directive Element

问题描述

我有一个指令元素:

return {
        restrict: 'E',
        replace: true,
        transclude: true,
        template:   '<ul>' +
                        '<li {{myNewAttrDirective}}>Home</li>' +
                        '<li {{myNewAttrDirective}}>Products</li>' +
                        '<li {{myNewAttrDirective}}>Cart</li>' +
                        '<li {{myNewAttrDirective}}>Contact Us</li>' +
                    '</ul>',
        scope: {
              _showMore : '=showMore'
        },
        link: function(scope, element, attrs) {

            if (scope._showMore === true) {
               scope.myNewAttrDirective = 'myAnimationDirective'
            }

        }
    };

HTML:

<my-directive show-more="true"></my-directive>

所以本质上，如果 show-more 等于 true，则将 {{myNewAttrDirective}} 替换为我拥有的属性指令，即 my-attr-指令.

So essentially, if show-more is equal to true, then replace {{myNewAttrDirective}} with an attribute directive i have i.e my-attr-directive.

我已经尝试过上面的 if 语句，但正如预期的那样，在 html 中，我只剩下 <li {{myNewAttrDirective}}>Home</li>

I have tried with the above if statement, but as expect, in the html, i am left with <li {{myNewAttrDirective}}>Home</li>

更新:

在我的 if 语句中，我可以通过以下方式添加属性:

Within my if statement, i can add an attribute via:

var item = element.find("li");
item.attr("myAnimationDirective", "");

在 HTML 中呈现，但单击事件不响应.(不过，如果我将它们添加到我的原始指令中，它们确实可以工作).

Which is rendered in the HTML, but the click events do not respond. (They do work if i added them to my original directive however).

推荐答案

已解决添加

$compile(element)(scope);

这篇关于向指令元素添加指令属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！