Question

我有一个指令元素：

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-directive的属性指令。

我已尝试使用上面的if语句，但正如预期的那样，在html中，我留下了<li {{myNewAttrDirective}}>Home</li>

更新：

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

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

哪个在HTML中呈现，但点击事件不响应。（如果我将它们添加到我的原始指令中，它们确实有效。）

Answer 1

解决了添加

$compile(element)(scope);

将指令属性添加到指令元素

1 个答案: