无法使用 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 中的 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 将绑定整个div 内$templateCache 而不是img .您可以通过将iconSwicher 放入img 标记或使用jqLite find 在link 中找到img 元素来解决此问题：

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

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

Working fiddle 供您参考。