javascript - Angular 同步相同的指令？

Question

我正在建立一种社交网络，其中我有一个 Angular Directive(指令)，点击将关注一个人。关注按钮将出现在该人的帖子旁边。因此，如果一个人发帖 3 次，该按钮将重复 3 次。但是，当我单击一个关注按钮时，另外两个按钮没有显示相同的结果。它们保持不变。

所以问题是如何同步其他 2 个按钮？

这就是我的代码的工作方式。这是一个用户的帖子，右下角有一个点赞按钮

当我点击帖子时，它会弹出模式，显示有关该帖子的更多详细信息，就像您点击 Facebook 中的图像时一样。

然后问题是，当我在模式弹出窗口中单击拇指向上时，它与原始弹出窗口中的拇指向上不同步

这是投票代码

VoteButtons.link = function (scope, ele, att) {
var post_id = att.voteButtons;
scope.up_vote_class = 'default';
scope.down_vote_class = 'default';
scope.up_votes_number = 0;
scope.down_votes_number = 0;
scope.post_id = post_id
var up_votes_id = [];
var down_votes_id = [];
if (post_id) {
  $http.get('/api/posts/get-votes/' + post_id).success(function (res) {
    if (res && !res.error) {
      up_votes_id = res.response.up_votes;
      down_votes_id = res.response.down_votes;
      if (up_votes_id) {
        scope.up_votes_number = up_votes_id.length;
      }

      if (down_votes_id) {
        scope.down_votes_number = -down_votes_id.length;
      }

      if ($rootScope.user && up_votes_id && up_votes_id.indexOf($rootScope.user._id) != -1) {
        scope.up_vote_class = 'success';
      }

      if ($rootScope.user && down_votes_id && down_votes_id.indexOf($rootScope.user._id) != -1) {
        scope.down_vote_class = 'danger';
      }

    }
  })

  scope.thumb_up = function () {
    $http.post('/api/posts/up-vote/' + post_id).success(function (res) {
      if (res && !res.error) {
        up_votes_id = res.response.up_votes;
        down_votes_id = res.response.down_votes;
        if (up_votes_id) {
          scope.up_votes_number = up_votes_id.length;
        }

        if (down_votes_id) {
          scope.down_votes_number = -down_votes_id.length;
        }

        if ($rootScope.user && up_votes_id && up_votes_id.indexOf($rootScope.user._id) != -1) {
          scope.up_vote_class = 'success';
          Socket.emit('thumb_up',res.response)
        } else {
          scope.up_vote_class = 'default';
        }

        if ($rootScope.user && down_votes_id && down_votes_id.indexOf($rootScope.user._id) != -1) {
          scope.down_vote_class = 'danger';
        } else {
          scope.down_vote_class = 'default';
        }

      } else {
        $rootScope.alerts = res.error.message;
      }
    })
  }

  scope.thumb_down = function () {
    $http.post('/api/posts/down-vote/' + post_id).success(function (res) {
      if (res && !res.error) {
        up_votes_id = res.response.up_votes;
        down_votes_id = res.response.down_votes;
        if (up_votes_id) {
          scope.up_votes_number = up_votes_id.length;
        }

        if (down_votes_id) {
          scope.down_votes_number = -down_votes_id.length;
        }

        if ($rootScope.user && up_votes_id && up_votes_id.indexOf($rootScope.user._id) != -1) {
          scope.up_vote_class = 'success';
        } else {
          scope.up_vote_class = 'default';
        }

        if ($rootScope.user && down_votes_id && down_votes_id.indexOf($rootScope.user._id) != -1) {
          scope.down_vote_class = 'danger';
        } else {
          scope.down_vote_class = 'default';
        }
      } else {
        $rootScope.alerts = res.error.message;
      }
    })
  }
}
}

Answer 1

要将更改传达给所有其他指令实例，您可以使用 pub/sub 样式。这可以通过使用 $rootScope.$broadcast 广播一个事件来完成，该事件可能会传递所跟踪的新事物的 ID。

然后，您的所有指令都可以监听该事件，并在回调时检查该指令是否链接到所遵循的事物。如果是这样，请更新按钮的状态。

很难解释，但我希望你能理解我的方法的逻辑。

希望它对您有所帮助!