无法使用 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

        });
    }
};
});

我的目标是onClick 我将图像源更改为另一个。通常它应该在 html 上工作，但我不知道为什么它在 templateCache HTML 上不起作用。它一定与 AngularJS 中的指令和模板缓存有关，但我是这个领域的新手，我想我没有足够的经验。

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

Answer 1

问题出在您的 iconSwitcher 指令中：

jqLite 函数 removeAttr 和 attr 无法识别您的属性名称 - 即。 attrs.src 它将 throw Error。您必须将属性更改为 src :
```
elem.removeAttr('src', 'your/image/path');
elem.attr('src', your/image/path);
```
iconSwitcher 指令在 $templateCache 中的位置与您在 iconSwitcher 中调用元素的方式有冲突。因为在您的 $templateCache 中，您将 icon-switcher 属性放在 div 中而不是 img 标记中，所以指令中的 elem 将绑定整个 div 在 $templateCache 中，而不是 img。您可以通过将 iconSwicher 放在 img 标记中或通过在 link:
中使用 jqLite find 来查找 img 元素来解决此问题
```
var img = elem.find('img');
```
并更改 img 的 src 属性而不是 elem。

Working fiddle供大家参考。

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

Not able to change attribute in $templateCache using an AngularJS Directive

javascript

jquery

angularjs

angularjs-directive

angular-directive