如何从外部调用指令函数?

时间:2014-09-15 19:48:05

标签: angularjs angularjs-directive

我有一个为我生成列表的指令。该指令具有分页方法。我想使用键盘来控制这个列表,这样当我向下或向右按下列表页面时。

无论如何我能做到吗?

下面有我的指令代码:

app.directive("gridview", function(){
    return {
        restrict:'E',  
        transclude: true,           
        template:'<div><button ng-disabled="!hasPrevious()" ng-click="onPrev()"> Previous </button><button ng-disabled="!hasNext()" ng-click="onNext()"> Next </button></div><div ng-transclude></div>',
        scope:{ 
            'currentItem':'=',
            'currentPage':'=',
            'pageLimit':'=',
            'data':'=',
            'totalPages' :'&'
        },
        link:function($scope, element, attrs){

            $scope.size = function(){
                return angular.isDefined($scope.data) ? $scope.data.length : 0;
            };

            $scope.end = function(){
                return $scope.start() + $scope.pageLimit;
            };

            $scope.start = function(){
                return $scope.currentPage * $scope.pageLimit;
            };

            $scope.totalPages = function(){
                $scope.totalPages({theTotal : $scope.size});
            };

            $scope.page = function(){
                return !!$scope.size() ? ( $scope.currentPage + 1 ) : 0;
            };

            $scope.hasNext = function(){
                return $scope.page() < ( $scope.size() /  $scope.pageLimit )  ;
            };

            $scope.onNext = function(){
                $scope.currentPage = parseInt($scope.currentPage) + 1;
                $scope.currentItem = parseInt($scope.currentPage) + 1; 
            };

            $scope.hasPrevious = function(){
                return !!$scope.currentPage;
            } ;

            $scope.onPrev = function(){
                $scope.currentPage=$scope.currentPage-1;
            };                
        }
    }
    });

1 个答案:

答案 0 :(得分:4)

您始终可以使用Angular事件系统,它允许您在控制器和指令之间进行交互。

只需在您的控制器中广播一个事件,然后在您的指令中收听该事件即可调用您想要的功能。

<强>控制器

$scope.$broadcast('onPrev')

<强>指令

$scope.$on('onPrev', function () {
  $scope.onPrev()
})

这是主要问题,但更具体的问题,你应该看看ngKeypress