Question

我有一个应用程序，其中一个人可以建立“收藏夹”列表。＆＃39;在特定项目的页面上有一个按钮，您可以单击该按钮将项目添加到收藏夹列表中。

我想要发生的是：点击按钮，项目被添加到收藏夹，现在按钮是不同的颜色，如果您再次点击它，它将从您的收藏夹中删除该项目。

我认为最好建立一个指令来处理这个，但我完全迷失了。

在我的HTML中我有：

<md-button class="md-icon-button" aria-label="Favorite" ng-click="addFavorite(item.id)">
<md-icon md-svg-icon="heart"></md-icon></md-button>

我的addFavorite和deleteFavorite函数正常工作，但我无法弄清楚如何切换发生的事件以及如何在请求触发后更新它。

Answer 1

因此，我们可以解决一些不同的问题。

很可能这将是一个div样式，看起来像一个按钮，以达到你想要的效果。你可以走简单路线并使用http://getbootstrap.com/css/?#buttons或其他东西。样式按钮不会是最好的跨浏览器支持。
您可以在指令中使用ng-class完成此操作，下面是一些示例代码。假设您正在使用bootstrap。这就变成了你想把它改成什么类的东西。下面我使用了一个图标，但主体是相同的。

指令

.directive('toggleClass', function() {
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {
            element.bind('click', function() {
                if(element.attr("class") == "glyphicon glyphicon-pencil") {
                    element.removeClass("glyphicon glyphicon-pencil");
                    element.addClass(attrs.toggleClass);
                    addFavorite(element.id);
                } else {
                    element.removeClass("glyphicon glyphicon-ok");
                    element.addClass("glyphicon glyphicon-pencil");
                    removeFavorite(element.id);
                }
            });
        }
    };
});

模板

<i class="glyphicon glyphicon-pencil" toggle-class="glyphicon glyphicon-ok"></i>

用于交换ng-click功能的Angular指令

1 个答案: