javascript - 无法使用 AngularJS 指令更改 $templateCache 中的属性

Question

这是我的指令:

module.directive('iconSwitcher', function() {

return {
    restrict : 'A',

    link : function(scope, elem, attrs) {

        var currentState = true;

        elem.on('click', function() {
            console.log('You clicked me!');

            if(currentState === true) {
                console.log('It is on!');
                angular.element(elem).removeAttr(attrs.src);
                angular.element(elem).attr(attrs.src, "../images/First.png");

            } else {
                console.log('It is off!');
                angular.element(elem).removeAttr(attrs.src);
                angular.element(elem).attr(attrs.src, "../images/Second.png");

            }

            currentState = !currentState

        });
    }
};
});

我的目标是在单击时将图像源更改为另一个。通常它应该适用于 html，但我不知道为什么它在 templateCache HTML 上不起作用。它一定与 AngularJS 中的 Directives 和 templateCache 有关，但我是这个领域的新手，我想我没有足够的经验。

    $templateCache.put('timeline_cursor.tpl.html', '<div icon-switcher><img style=" margin-bottom:6px;cursor:pointer;" src="../images/First.png" "/></div>');

Answer 1

问题出在你的 iconSwitcher 内部指令:

1. jqLite功能removeAttr和attr无法识别您的属性名称 - 即。 attrs.src它将 throw Error 。您必须将属性更改为 src :

   elem.removeAttr('src', 'your/image/path');
   elem.attr('src', your/image/path);
   

2. 您的iconSwitcher的位置您的 $templateCache 内的指令以及您在 iconSwitcher 中调用元素的方式有冲突。因为在你的$templateCache你把icon-switcher div 中的属性而是在 img标签，elem在你的指令中将绑定(bind)整个 div里面$templateCache而不是img 。您可以通过输入 iconSwicher 来解决此问题在 img标记或查找 img使用 jqLite find 元素里面link :

   var img = elem.find('img');
   

   并更改src img 的属性而不是elem .

Working fiddle供你引用。