传递多个参数，从角指令控制器功能 [英] Pass more than one arguments to controller function from angular directive

问题描述

我需要从指令的两个参数传递给它在控制器中定义的函数。

I need to pass two arguments from directive to a function which is defined in controller.

HTML 的

HTML

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

指令的

Directive

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

现在我正未定义为 NEWPAGE 和 last_page 在控制器中。

Now I am getting undefined for newPage and last_page in controller.

看到我的小提琴这里

See my fiddle here

推荐答案

解决方案一（小提琴 ）：

Solution one (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
    });
};

解决方案二（小提琴）：

Solution two (fiddle):

HTML：

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

指令：

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

的请注意，您需要更改范围到 $范围在两个地方在你的控制器功能 $ scope.changePage 在原始小提琴。的

Note that you need to change scope to $scope in two places in your controller function $scope.changePage in your original fiddle.

这篇关于传递多个参数，从角指令控制器功能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！