Javascript 单击后更新指令内容和事件

现在；我正在制作一个指令，将一篇文章添加/删除为收藏夹（用户有一个收藏夹文章列表），它会显示一个满/空的心形图标，这取决于该文章是否已经是收藏夹，当用户单击它时，它会对该文件进行收藏夹/不利处理（并更改其行为以撤消fav操作）

函数favoriteWidgetDirective（$rootScope，articles）{
返回{
范围：{
“文章”：“=”
},
限制：“A”，
模板：“”+
'' +
'',
链接：函数postLink（$scope，element，attrs）{
//检查文章是否已经是收藏夹，使用登录用户的收藏夹数组
var isfavorite=函数（id）{
var=false；
$rootScope.currentUser.Favorites.some（函数（fav、idx）{
如果（fav.article==id）{
宠爱=真；
返回true；
}
});
回归最爱；
};
var setfavorite=函数（id）{
event.stopPropagation（）；
//API调用
文章。收藏（id）；
//更新用户收藏夹数组
$rootScope.currentUser.Favorites.push（{article:id}）；
//一些魔术在这里更新图标和点击绑定？？
//....
};
var不利=函数（id）{
//与SetFavorite非常相似，但恰恰相反
};
var articleismfavorite=isfavorite（$scope.article.id）；
//按钮的样式（空的或满的心形）
$scope.favClass=ArticleisFavorite？'full'：'empty'；
//将在单击时使用的功能
$scope.favFunction=ArticleisFavorite？不利：setFavorite；
}
};
}

现在的问题（对于训练有素的人来说，这一点必须是显而易见的），API被调用，fav被添加，但UI并没有用新类或新函数更新自己

我读到过Angular很棒，但不是魔术，我需要加一块$apply或$watch，但由于我没有掌握这些技术，我一直无法获得想要的行为

当前的aproach非常容易改变（因为作为一个有指令的乞丐，我知道这可能真的是错误的），所以如果它必须被抛弃和重建，请告诉我（善意地：），添加建议）

---

谢谢。

您已经设置了

favClass

和

favFunction

，所以您知道如何操作。我不知道你在哪里看到了这个问题。谢谢你指出这一点，我太专注于错误的地方而错过了它。现在，添加了设置这两个变量的行，它起作用了，最后一个问题是；这是推荐的做法吗？（我总是尝试以最被接受的方式做事，这样任何人都能理解，很少有人批评）这种方法没有本质上的错误。您可以查看

ngClass

指令。这样您就不必设置

favClass

。

function favouriteWidgetDirective($rootScope, articles) {
    return {
      scope: {
        'article': '='
      },
      restrict: 'A',
      template: '<button class="favourite" >' +
                    '<i class="icon-heart-{{ favClass }}" ng-click="favFunction(article.id)"></i>' +
                '</button>',
      link: function postLink($scope, element, attrs) {

        //Check if an article is already a favorite, uses the favourites array of the logged user
        var isFavourite = function(id) {
          var favourite = false;
          $rootScope.currentUser.favourites.some(function (fav, idx) {
            if (fav.article === id) {
              favourite = true;
              return true;
            }
          });
          return favourite;
        };

        var setFavourite = function(id) {
          event.stopPropagation();
          //API call
          articles.favourite(id);
          //Update user favourites array
          $rootScope.currentUser.favourites.push({article: id});
          //Some magic here to update the icon and the click binding??
          //....
        };

        var unFavourite = function(id) {
          //Very similar to setFavourite.., but the opposite
        };

        var articleIsFavourite = isFavourite($scope.article.id);
        //The style for the button (an empty or full heart)
        $scope.favClass = articleIsFavourite ? 'full' : 'empty';
        //The function that will be used on the click
        $scope.favFunction = articleIsFavourite ? unFavourite : setFavourite;

      }
    };
  }