Как вызвать функцию несколько раз из шаблона ячейки в ui-grid в angularjs?

Question

У меня есть один контроллер в angularJs(1.6), который использует ui-grid. Проблема в том, что есть один шаблон ячейки. Я хочу получить разные значения для процентного рейтинга в этом шаблоне. Я создал функцию "getRating()" и вызвал ее. Но он вызывается только один раз. Следовательно, я получаю одинаковое значение для всего шаблона.

Может ли кто-нибудь помочь мне с этим?

Вот мой код контроллера:

 (function () {
    'use strict';

     define([
         'angular'
     ], function (angular) {

     function SelectToolController($scope, $timeout, $filter, uiGridConstants) {
                  var vm = this,
                      _gridApi,
                      _cellTemplate,
                      _columnDefs,
                      _starRatingTemplate,
                      _starRatingColumn,
                      _starEnable;
            };
            _starRatingTemplate = [
                  '<div class="opr-star-rating"  >',
                  '<opr-star-rating rating-percentage="'+getRating()+'">',
                  '</opr-star-rating>',
                  '</div>'
            ].join('');

      vm.rating = 10;

      //this func is called from _starRatingTemplate 
       vm.getRating = function(){
           return vm.rating++;
        }


      });

Как вы можете видеть, я увеличиваю значение каждый раз, когда вызывается функция getRating. Но эта функция вызывается только один раз. В итоге я получаю значение 11 для всех ячеек в моей сетке.

Answer 1

Строка шаблона "вычисляется" один раз и используется в каждой ячейке, поэтому вызов getRating() производится только один раз при построении строки шаблона.

Чтобы каждый раз вызывать функцию, вы должны использовать "усы" {{}} и ссылаться на ваш контроллер.

Итак, ваш код должен быть похож на это:

_starRatingTemplate = [
    '<div class="opr-star-rating"  >',
    '<opr-star-rating rating-percentage="{{$ctrl.getRating()}}">',
    '</opr-star-rating>',
    '</div>'
].join('');