为我的应用程序创建自定义按钮

Question

我想要一个动态知道我是否在我的应用程序中关注用户的指令。

我有一个资源来获取currentUser

    this.following = function () {
        var defer = $q.defer();
        var user = $cookies.getObject('currentUser');
        UserResource.get({id: user.id}).$promise.then(
            function (data) {
                defer.resolve(data.following);
            });
        return defer.promise;
    };

这是我的一项服务。它返回我正在关注的所有用户。

在实例化我的控制器时，我会在我的应用程序中获取我关注的用户：

   UserService.following().then(
        function (data) {
            $scope.following = data;
        });

我想将其移到指令中，以便我可以轻松地在我的应用程序中的其他位置重复使用它。

这是我现在使用的HTML（并不是很漂亮）：

   <div class="item" ng-repeat="user in users">
        <div class="right floated content">
            <div ng-show="isFollowing(user)" class="ui animated flip button" tabindex="0"
                 ng-click='unFollow(user)'>
                <div class='visible content'>
                    Following
                </div>
                <div class="hidden content">
                    Unfollow
                </div>
            </div>
            <div ng-hide="isFollowing(user)" ng-click="follow(user)" class="ui button">Follow</div>
        </div>
    </div>

但更像是：

<div class="item" ng-repeat="user in users">
      <um-follow-button um-user="user"></um-follow-button>
</div>

然后取决于我是否关注用户，然后呈现两个选项之一。

我不知道我是否必须在指令中使用控制器。

我看过：https://gist.github.com/jhdavids8/6265398 但它看起来像一团糟。