Question

我正在尝试实现一个简单的＆lt; pagination＆gt; Angular JS中的指令，无法让它与另一个控制器通信，以使其对当前页面的更改做出反应。

以下是我的代码：

paginationDirective.js

app.controller('paginationCtrl', function ($scope) {
    this.init = function (attrs) {
        $scope.items = [
            {'page': '1', class: 'current'},
            {'page': '2', class: ''},
            {'page': '3', class: ''},
            {'page': '4', class: ''},
            {'page': '5', class: ''}
        ];
    };
});

app.directive('pagination', function () {
    return {
        controller: 'paginationCtrl',
        restrict: 'E',
        scope: {
            count: '@',
            page: '@'
        },
        templateUrl: 'views/partials/pagination.html',
        link: function (scope, element, attrs, paginationCtrl) {
            paginationCtrl.init(attrs);
        }
    }
});

pagination.html

<div class="pagination-centered">
    <ul class="pagination">
        <li class="arrow unavailable"><a href="">&laquo;</a></li>
        <li ng-repeat="item in items" class="{{ item.class }}">
            <a href="" ng-click="<!-- somepageCtrl.navigate(item.page) -->">{{ item.page }}</a>
        </li>
        <li class="arrow"><a href="">&raquo;</a></li>
    </ul>
</div>

somepage.html

<div class="content">
    <table>...data for page x...</table>

    <pagination onpage=" <!-- Run somepageCtrl.page(x) --> "></pagination>
</div>

somepageCtrl.js

app.controller('somepageCtrl', function($scope, myService){
    $scope.currentPage = 1;

    $scope.init = function () {
        myService.loadData($scope);
    };

    $scope.navigate = function(page) {
        console.log('Navigating to page ' + page);
    }

    $scope.init();
});

我还是AngularJS的新手，所以我不完全确定我应该怎么做才能让分页指令告诉somepageCtrl导航到下一页。

我希望能够传递一个函数，当用户单击pagination指令中的项目作为指令的属性时，需要执行该函数。

任何人都可以帮助并推动我朝着正确的方向前进吗？

Answer 1

您可以使用强制回调&从指令中调用您的控制器。

分页指令

app.directive('pagination', function () {
    return {
        controller: 'paginationCtrl',
        restrict: 'E',
        scope: {
            count: '@',
            page: '@',
            onPageChange: '&'
        },
        templateUrl: 'views/partials/pagination.html',
        link: function (scope, element, attrs, paginationCtrl) {
            paginationCtrl.init(attrs);

           // grab function pointer so it will be called  correctly with ng-click
           scope.onPageChange = scope.onPageChange();
        }
    }
});

<强> somepage.html

<div class="content">
    <table>...data for page x...</table>

    <pagination on-page-change="sompageCtrl.navigate"></pagination>
</div>

<强> pagination.html

<div class="pagination-centered">
    <ul class="pagination">
        <li class="arrow unavailable"><a href="">&laquo;</a></li>
        <li ng-repeat="item in items" class="{{ item.class }}">
            <a href="" ng-click="onPageChange(item.page)">{{ item.page }}</a>
        </li>
        <li class="arrow"><a href="">&raquo;</a></li>
    </ul>
</div>

Answer 2

我要回答我自己的问题，感谢Esteban Felix指出我正确的方向。

我在somepageCtrl上定义了navigate（）方法：

$scope.navigate = function (page) {
    console.log('Lets go to page ' + page);
};

然后简单地将功能添加到

<pagination on-change="navigate"></pagination>

然后在app.directive定义中分配该方法，如下所示：

scope: {
    count: '@',
    page: '@',
    onChange: '&onChange'
},

在paginationCtrl的app.controller上，我创建了一个回调函数：

$scope.callback = function (page) {
    console.log('Turn to page ' + page);
    $scope.onChange()(page);
}

并更新了pagination.html的标记，用ng-click调用上面的回调，如下所示：

<a href="" ng-click="callback(item.page)">{{ item.page }}</a>

Angular JS指令，调用另一个控制器

2 个答案: