AngularJs 指令不会针对源元素的属性更新进行自我更新

Question

几乎尝试了所有方法但没有成功。

我只想在单击 class 名称为 "ion-android-favorite-outline" 的元素时执行操作。

我的源元素如下

<i id="{{product.product_code}}" class="icon ion-android-favorite-outline"></i>

我可以在指令代码中使用 "restrict:'C'" 来完成。

在指令中，完成数据处理后，我将源元素的 class 更改为 "ion-android-favorite"，如下所示。

.directive(
    "ionAndroidFavoriteOutline",
    function(sessionStorageService, productService){
        return{
            restrict: 'C',
            link: function(scope, element, attrs) {
                element.bind("click" , function(e){
                    var productCode =   attrs.id;
                    console.log(attrs.class);   // on every click i get class name as 'ion-android-favorite-outline' event though html has class name as 'ion-android-favorite'
                    if (sessionStorageService.isLoggedIn()) {
                        productService.trackProduct(productCode).then(function(response){
                            if (response.data.status == "success") {
                                element.removeClass("ion-android-favorite-outline").addClass("ion-android-favorite");
                            } else {
                                element.removeClass("ion-android-favorite").addClass("ion-android-favorite-outline");
                            }
                        });

                        scope.$apply();
                    }

我可以看到源元素的 class 名称发生了变化，它在 UI 中的反映也发生了变化。

但是，如果我再次单击源元素（其 class 在之前的单击操作中已更改）仍会调用指令代码。

为什么？？？

我尝试了 scope.$apply 、 replace: true 等...但没有解决方法。

请帮忙。

Answer 1

您可以使用如下指令：

 <i id="{{product.product_code}}" class="ion-android-favorite-outline" ion-android-favorite-outline></i>

Answer 2

.

element.unbind("click");

AngularJs 指令不会针对源元素的属性更新进行自我更新

AngularJs Directive don't update itself for source element's attribute updates

directive

angularjs