角度范围变量不更新指令内部

时间:2015-03-03 11:42:55

标签: angularjs

我正在使用angular ng-simplepaginator,我已经为selectbox实现了自定义指令。

指令

.directive('sel',['onChangeService', function(onChangeService) {
    return {        
        template: '<select class="span2" ng-model="itemsPerPage" ng-options="obj as obj for obj in itemsPerPageList" data-style="btn-primary" bs-select></select>',
        restrict: 'E',
        scope: {
            itemsPerPage: '=',
            totalitems: '=totalitems'           
        },
        link: function (scope, elem, attrs) {
            scope.itemsPerPageList = ['All','10','20','30','40'];
            scope.itemsPerPage = scope.itemsPerPageList[1];
        },
        controller: function ($scope, $element) {
            $scope.$watch('itemsPerPage', function () {             
                onChangeService.changePager($scope, $scope.itemsPerPage, $scope.totalitems.length); 

            });
        }
    };
}]);

服务

tellerApp.factory('onChangeService', function ($rootScope, Pagination) {    
    return {
        changePager: function($scope,itemsPerPage,totalLength) {                                
            $scope.pagination = Pagination.getNew(itemsPerPage);                        
            $scope.pagination.numPages = Math.ceil(totalLength/$scope.pagination.perPage);          
        }
     }
    });  

我可以调用service inside指令,但页面值不会更新。

例如,当我选择20个项目时,值不会更新。 (即pagination.numPages,pagination.page值未更新)

<ul class="pagination">                                 
     <li ng-class="pagination.firstPageDisabled()"><a href="javascript:void(0)" ng-click="pagination.firstPage()">First</a></li>
     <li><a href="javascript:void(0)" ng-click="pagination.prevPage()">&laquo;</a></li>                       
      <li ng-repeat= "n in pagination.range(pagination.numPages, pagination.page, pagination.page+pagination.gap)" ng-class="{active: n == pagination.page}">
        <a href="javascript:void(0)" ng-click="pagination.toPageId(n)">{{n + 1}}</a>
      </li>
    <li><a href="javascript:void(0)" ng-click="pagination.nextPage()">&raquo;</a></li>
    <li ng-class="pagination.lastPageDisabled()"><a href="javascript:void(0)" ng-click="pagination.lastPage()">Last</a></li>
</ul>

0 个答案:

没有答案