將Angular變量傳遞給指令

Question

我正在按角度建立分頁，這是我的指令：

app.directive('postsGenreLink', function() {
    return {
        restrict: 'EA',
        templateUrl: myLocalized.partials + 'posts-genre-link.html',
        controller: ['$scope', '$element', '$routeParams', function($scope, $element, $routeParams) {
            var currentGenrePage = (!$routeParams.page) ? 1 : parseInt($routeParams.page),
                linkPrefix = (!$routeParams.slug) ? 'page/' : 'genre/' + $routeParams.slug + '/page/';

            $scope.postsGenreLink = {
                prevLink: linkPrefix + (currentGenrePage - 1),
                hopLink: linkPrefix + (currentGenrePage),
                nextLink: linkPrefix + (currentGenrePage + 1),
                sep: (!$element.attr('sep')) ? '|' : $element.attr('sep'),
                prevLabel: (!$element.attr('prev-label')) ? 'Previous Page' : $element.attr('prev-label'),
                nextLabel: (!$element.attr('next-label')) ? 'Next Page' : $element.attr('next-label'),
                hopLabel: (!$element.attr('Jump')) ? 'Jump' : $element.attr('Jump')
            };
        }]
    };
});

這是我要顯示的posts-genre-link.html：

<nav aria-label="...">
  <ul class="pagination pt-3">
    <li class="page-item" ng-class="{'disabled' : currentGenrePage == 1}">
      <a class="page-link" href="{{postsGenreLink.prevLink}}">Previous</a>
    </li>
    <li ng-repeat="i in [].constructor(totalPages) track by $index" class="page-item" ng-class="{'active' : currentGenrePage == $index + 1}"><a class="page-link" href="{{postsGenreLink.hopLink}}">{{$index + 1}}</a></li>

    <li class="page-item" ng-class="{'disabled' : currentGenrePage >= totalPages}">
      <a class="page-link" href="{{postsGenreLink.nextLink}}">Next</a>
    </li>
  </ul>
</nav>

除了ng-repeat內的href以外，它的效果都很好。 我希望hopLink是linkPrefix加上$index + 1的值。 我該如何實現？

Answer 1

我已經解決了這個改變hopLink到hopLink: linkPrefix,並且內部href我所做的： href="{{postsGenreLink.hopLink}}{{$index + 1}}" 這比通過ng-click將$index值傳遞給控制器​​更簡單。