Question

现在;我做了一个指令，添加/删除一篇文章作为收藏（用户有一个喜欢的文章列表），它显示一个完整/空心的图标取决于文章是否已经是最喜欢的，并且当用户点击它，它最喜欢/不喜欢文章（并改变它的行为以撤消赞成行动）。

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;

      }
    };
  }

现在问题（对于训练有素的眼睛在这一点上必须明显），API被调用并添加了fav，但是UI没有用新类或新函数更新自己。

我读过Angular很棒，但不是魔法，我需要添加$ apply或$ watch，但由于我不掌握这些技巧，我已经能够得到理想的行为。

当前的方法对变化是非常开放的（因为作为一个带有指令的begginer，这可能是非常错的，我知道），所以如果它必须被扔掉并重建只是让我知道（亲切:)，添加建议）

谢谢。

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

0 个答案: