AngularJs SmartTable: adding Template variables

Question

I use SmartTable , in that table I have pagination template. In the footer of the table I need to dispay "page 1 of X", so I use a html template:

<tfoot>
    <tr>
        <td colspan="{{ct.headCells.length}}" class="text-center">
            <div st-items-by-page="itemsPerPage" 
                 st-pagination="" 
                 st-template="/templates/pagination.custom.html">
            </div>
        </td>
    </tr>
</tfoot>

In my pagination.html template I have

<li><page-select>{{currentPage}}</page-select> of {{numPages}}</li>

All good, currentPage and numPages are well displayed.

Now, I need to translate the word of, say, in French, so I added a new variable $scope.ofText = "de"... and I use it in the HTML template:

<li><page-select>{{currentPage}}</page-select> {{ofText}} {{numPages}}</li>

does not display any text instead of {{ofText}}...

What should I do to add custom variables in my template?

Answer 1

@Serge, You can add it in the "pageSelect.directive.js" file. I have added the translation as a scope variable in the directive inside the link function and it is displayed. Please see the plunker.

https://plnkr.co/edit/bunKjbMpQm8bevUYacFt?p=preview

angular.module('myApp')
    .directive('pageSelect', function() {
      return {
        restrict: 'E',
        template: '<input type="text" class="select-page" ng-model="inputPage" ng-change="selectPage(inputPage)">',
        link: function(scope, element, attrs) {
          scope.$watch('currentPage', function(c) {
            scope.inputPage = c;
          });
          scope.ofStr="de";
        }
      }
    });