從角度指令向控制器函數傳遞多個參數

Question

我需要將兩個參數從指令傳遞給控制器​​中定義的函數。

的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);
        }
    }
});

控制者

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

現在，我在控制器中的newPage和last_page undefined 。

在這里看到我的小提琴

Answer 1

解決方案一（ 提琴 ）：

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
    });
};

解決方法二（ 提琴 ）：

HTML：

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

指示：

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

請注意，您需要在原始小提琴中的控制器函數$scope.changePage中的兩個位置將scope更改為$scope 。