javascript - 从 Angular Directive(指令)将多个参数传递给 Controller ​​函数

Question

我需要将指令中的两个参数传递给 Controller ​​中定义的函数。

HTML

<div paginate="allResults" change-page="changePage()"></div>

指令

app.directive('paginate', function () {
    return {
        scope: {
            allResults: '=paginate',
            changePage:'&'
        },
        template: '<ul class="pagination" ng-show="totalPages > 1">' +
            '  <li><a ng-click="firstPage()">&laquo;</a></li>' +
            '  <li><a ng-click="prevPage()">&lsaquo;</a></li>' +
            '  <li ng-repeat="n in pages">' +
            '    <a class="current-{{n==current_page}}" ng-bind="n" ng-click="setPage(n)">1</a>' +
            '  </li>' +
            '  <li><a ng-click="nextPage()">&rsaquo;</a></li>' +
            '  <li><a ng-click="last_page()">&raquo;</a></li>' +
            '</ul>',
        link: function (scope) {
            scope.nextPage = function () {
                if (scope.current_page < scope.totalPages) {
                    scope.current_page++;
                }
            };

            scope.prevPage = function () {
                if (scope.current_page > 1) {
                    scope.current_page--;
                }
            };

            scope.firstPage = function () {
                scope.current_page = 1;
            };

            scope.last_page = function () {
                scope.current_page = scope.totalPages;
            };

            scope.setPage = function (page) {
                scope.current_page = page;
            };
            var paginate = function (results, oldResults) {
                if (oldResults === results) return;
                scope.current_page = results.current_page;
                scope.total = results.total;
                scope.totalPages = results.last_page;
                scope.pages = [];

                for (var i = 1; i <= scope.totalPages; i++) {
                    scope.pages.push(i);
                }
            };

            var pageChange = function (newPage, last_page) {
                scope.changePage(newPage, last_page);
            };

            scope.$watch('allResults', paginate);
            scope.$watch('current_page', pageChange);
        }
    }
});

Controller

function CareerCtrl($scope, $http, Career) {

    $scope.init = function () {
        Career.get({}, function (response) {

            $scope.careers = response.careers.data;
            $scope.allResults = response.careers;
        }, function (error) {
            console.log(error);
            $scope.careers = [];
        });

    }; // init

    $scope.changePage = function(newPage, last_page) {
        console.log(newPage);
        console.log(last_page);
        if (newPage == last_page) return;
        Career.get({
             page: newPage
        }, function (response) {
         angular.copy(response.careers.data,scope.allResults.data);
         scope.allResults.current_page = response.careers.current_page;
        }, function (error) {
             console.log(error);
             $scope.allResults.data = [];
       });

    }
} // Ctrl

现在我在 Controller 中得到 newPage 和 last_page 的 undefined。

<强> See my fiddle here

Answer 1

解决方案一 ( fiddle ):

HTML:

<div paginate="allResults" change-page="changePage(newPage, last_page)"></div>

指令:

var pageChange = function (newPage, last_page) {
    scope.changePage({
        newPage: newPage,
        last_page: last_page
    });
};

解决方案二 ( fiddle ):

HTML:

<div paginate="allResults" change-page="changePage"></div>

指令:

var pageChange = function (newPage, last_page) {
    var expressionHandler = scope.changePage();
    expressionHandler(newPage, last_page);
};

请注意，您需要在 Controller 函数 $scope.changePage 的两个位置将 scope 更改为 $scope原始 fiddle 。