Передайте несколько аргументов функции контроллера из угловой директивы

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 

Теперь я получаю undefined для newPage и last_page в контроллере.

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

Обратите внимание, что вам нужно изменить scope к $scope в двух местах в функции контроллера $scope.changePage в вашем оригинальная скрипка.