Ng-Bind Влиятельная голова стола

Question

У меня есть таблица с тремя столбцами в заголовке.Я хочу связать функцию, которая вычисляет этот третий столбец - столбец промежуточного итога.Когда я добавил эту привязку к thead в шаблоне, я получил нужные результаты.Но я потерял заголовок таблицы.Я работал в решении, предложенном пользователем, и это сработало, моя голова стола вернулась.Но теперь проблема в том, что есть другое представление, использующее шаблон расширяющейся таблицы.Что мне нужно сделать, так это то, что в этом свойстве ng-repeat в $ table.properties track by property.type мне нужно проверить, имеет ли таблица свойство типа 'runningTotal'.И если это произойдет, чтобы запустить мою функцию CalculateRunningTotal.В противном случае эта функция запускается для каждой таблицы, использующей этот шаблон, и пытается манипулировать третьим столбцом, что бы это ни было.Это не то, что мне нужно.

<th ng-bind="calculateRunningTotal(property.type)" ng-repeat="property in $table.properties track by property.type"
            class="col-xs-{{property.size}} clickable" ng-click="$table.sorter.changeType(property.type)">
            {{property.label}} &nbsp;
          <i class="fa fa-caret-{{$table.sorter.directionFor(property.type)}} fa-lg"></i>
        </th>

Это код шаблона:

import app from 'act/app';
import * as table from 'act/components/table';
import './expanding-table.styles.less';
import * as $ from 'jquery';

const expander = `
  <td class="col-xs-1 text-center link" ng-click="$event.stopPropagation()">
    <i class="fa fa-chevron-{{$item.expanded ? 'up' : 'down'}}" ng-click="$item.expanded = !$item.expanded"></i>
  </td>
`;

const fakeRows = `
  <tbody ng-if="!$table.list.length">
    <tr class="dummy-data" ng-repeat="dummy in $table.fakeRows">
      ${expander}

      <td ng-repeat="property in $table.properties track by property.type">
        dummy
      </td>
    </tr>
  </tbody>
`;

const header = `
  <thead>
    <th>

    </th>

    <th ng-bind="calculateRunningTotal()" ng-repeat="property in $table.properties track by property.type"
        class="col-xs-{{property.size}} clickable" ng-click="$table.sorter.changeType(property.type)">
        {{property.label}} &nbsp;
      <i class="fa fa-caret-{{$table.sorter.directionFor(property.type)}} fa-lg"></i>
    </th>
  </thead>
`;

const rows = ({ row, ngRepeat, cell }) => `
  <tbody ng-if="$table.list.length">
    <tr class="clickable"
        ng-repeat-start="${ngRepeat}"
        ng-click="$item.expanded = !$item.expanded"
        ng-init="$item.expanded = false">
      ${row({ cell })}
    </tr>

    <tr class="expanded-row" ng-show="$item.expanded"
        ng-repeat-end>
      <td colspan="12">
        <div expanded-placeholder></div>
      </td>
    </tr>
  </tbody>
`;

const row = ({ cell }) => `
  ${expander}

  ${cell}
`;

app.directive('actExpandingTable', ['$compile', $compile =>
  table.defaultDirective({
    link: function($scope, $element, $attrs, $tables, $transclude) {
      // wondering what's going on here? see table/table.resources.js

      const $el = $(table.generateTemplate({ header, rows, row, fakeRows }));
      $scope.vm = $scope.$parent.vm;
      $scope.calculateRunningTotal= function(){
 if(type ==="runningTotal"){
        console.log("Calculate Running Total Called");
        var attendantTotalCell = 0;
        var total = 0;
        var totalCell="";
        var totalsCells = document.querySelectorAll("td:nth-child(3)");

        totalsCells.forEach(function(cell, index){
          totalCell = cell.innerText;
          attendantTotalCell = totalCell.replace(/[^0-9-.]/g, '');
          total = parseInt(attendantTotalCell) + parseInt(total);
          if(cell.nextElementSibling){
          cell.nextElementSibling.innerHTML = '$' + total.toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,');
          }
        })

        var tableHeadRow = document.querySelectorAll('th.col-xs-2.clickable');
        tableHeadRow.forEach(th =>{
          th.addEventListener("click", function(){
            console.log("Table head clicked");
            var attendantTotalCell = 0;
            var total = 0;
            var totalCell="";
            totalsCells.forEach(function(cell, index){
              totalCell = cell.innerText;
              attendantTotalCell = totalCell.replace(/[^0-9-.]/g, '');
              total = parseInt(attendantTotalCell) + parseInt(total);
              if(cell.nextElementSibling){
              cell.nextElementSibling.innerHTML = '$' + total.toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,');
              }
            })
          })
        }) 
         return label;
         }
        }
      $transclude($scope, content => {
        if (content.length > 1) {
          $el.find('[expanded-placeholder]').replaceWith(content);
        } else {
          throw new Error('Expanding table requires transcluded content to show when expanded!');
        }

        $compile($el)($scope, v => $element.append(v));
      });
    },
  })
]);

Answer 1

Используйте двойную вьющуюся разметку {{CalcualRunningTotal ()}} вместо ng-bind, так как ng-bind с функцией не будет запускаться для каждого цикла дайджеста, если вы не передаете какую-либо переменную этому методу.Проверьте эту ссылку для более подробной информации - AngularJS ng-bind с функцией

<th ng-repeat="property in $table.properties track by property.type"
        class="col-xs-{{property.size}} clickable" ng-click="$table.sorter.changeType(property.type)">
        {{calculateRunningTotal()}}{{property.label}} &nbsp;
      <i class="fa fa-caret-{{$table.sorter.directionFor(property.type)}} fa-lg"></i>
    </th>

Причина пустого заголовка с примером:

th tagотображает возвращаемое значение функции ng-bind, так как возбуждает вычисление totalRunningTotal, а не возвращаемое значение, заголовок становится пустым

Чтобы решить вашу проблему с помощью ng-bind, передайте property.label в ng-bind = "convertRunningTotal(property.label) "и возвращаемое значение из convertRunningTotal

$scope.calculateRunningTotal= function(label){
  //total calculation here

return label

}

образец кода для справки - https://codepen.io/nagasai/pen/vzqadB