javascript - 如何将 Angular 指令中的值返回到 Controller 中的 $scope 变量？

Question

我正在使用 angular-ua-pivot-table.js，我想将更新后的表信息保存在 Controller 的 $scope 变量中。

这是整个指令:

  angular.module('ua.pivottable', [])
.directive('pivotTable', pivotTableDirective);

function pivotTableDirective() {
return {
  restrict: 'E',
  link: function (scope, element, attrs) {
    var derivers = $.pivotUtilities.derivers;
    function updatePivotTable(newValue, oldValue) {
      if (newValue) {
        var derived = scope.$eval(attrs.derivedAttributes);
        console.log(derived);
        var finalDerived = {};
        derived.forEach(function (e, i) {
          if (e.type === "date") {
            finalDerived[e.name] = derivers.dateFormat("donationDate", "%m/%d/%y");
            finalDerived[e.name + " (month)"] = derivers.dateFormat("donationDate", "%n");
            finalDerived[e.name + " (year)"] = derivers.dateFormat("donationDate", "%y");
          } else if (e.type === "lookup") {
            finalDerived[e.name] = function (row) { return row[e.attr] || "(none)" }
          } else if (e.type === "hidden") {
            finalDerived[e.name] = function (row) { return "(none)" };
          }
        });
        console.log(finalDerived);
        var pivotData = scope.$eval(attrs.pivotData);
        if (pivotData) {
          var pivotAttrs = $.extend({}, {
            rows: attrs.rows ? scope.$eval(attrs.rows) : undefined,
            cols: attrs.cols ? scope.$eval(attrs.cols) : undefined,
            aggregatorName: attrs.aggregatorName ? scope.$eval(attrs.aggregatorName) : undefined,
            vals: attrs.vals ? scope.$eval(attrs.vals) : undefined,
            rendererName: attrs.rendererName ? scope.$eval(attrs.rendererName) : undefined,
            aggregators: attrs.aggregators ? scope.$eval(attrs.aggregators) : undefined,
            derivedAttributes: finalDerived ? finalDerived : undefined,
            hiddenAttributes: attrs.hiddenAttributes ? scope.$eval(attrs.hiddenAttributes) : undefined,
            onRefresh: function (config) {
              var config_copy = JSON.parse(JSON.stringify(config));
              //delete some values which are functions
              delete config_copy["aggregators"];
              delete config_copy["renderers"];
              //delete some bulky default values
              delete config_copy["rendererOptions"];
              delete config_copy["localeStrings"];
              //$("#output").text(JSON.stringify(config_copy, undefined, 2));
              scope.saveState = config_copy;
              scope.$parent.saveState = config_copy;
              console.log(scope);
            }
          });
          console.log(pivotAttrs);
          angular.element(element)
            .pivotUI(pivotData, pivotAttrs);
        }
      }
    };

    scope.$watchGroup([
      attrs.pivotData,
      attrs.rows,
      attrs.cols,
      attrs.aggregatorName,
      attrs.vals,
      attrs.rendererName,
      attrs.aggregators,
      attrs.derivedAttributes,
      attrs.hiddenAttributes
    ], updatePivotTable, true);
  }
};
}

onRefresh 方法是我一直在工作的地方。每次编辑数据透视表时，表的值都会保存在名为 config_copy 的变量中。我想让我的 Controller 访问名为 $scope.saveState 的 $scope 变量中的 config_copy。

这是 HTML:

<pivot-table id="pivotTable" class="table" save-state="pivotTable" pivot-data="pivotTable.data"
                       rows="pivotTable.rows"
                       cols="pivotTable.cols"
                       vals="pivotTable.vals"
                       aggregators="pivotTable.aggregators"
                       aggregator-name="pivotTable.aggregatorName"
                       renderer-name="pivotTable.rendererName"
                       derived-attributes="pivotTable.derivedAttributes"
                       hidden-attributes="pivotTable.hiddenAttributes">
          </pivot-table>

以及初始化数据透视表的 Controller 代码:

var prepPivot = function (savedTable) {

      if ($scope.donations.length>0) {
        console.log('pivotInit', pivotInit)

        var derivers = $.pivotUtilities.derivers;
        var tpl = $.pivotUtilities.aggregatorTemplates;
        var numberFormat = $.pivotUtilities.numberFormat;
        var currencyFormat = numberFormat({ prefix: "$" });
        console.log($scope.donations);
        $scope.derived = [
          {
            name: "Donation date",
            type: "date",
            attr: "donationDate",
          },
          {
            name: "Donation status",
            type: "lookup",
            attr: "status",
          },
          {
            name: "Disbursement status",
            type: "lookup",
            attr: "disbursementStatus",
          },
          {
            name: "$$hashKey",
            type: "hidden",
          }
        ];

        var settings = {
          hiddenAttributes: [],
          derivedAttributes: $scope.derived,
          aggregators: {
            "Donation Count": function () { return tpl.count()() },
            "Receipt Amount": function () {
              return tpl.sum(currencyFormat)(["receiptAmount"]);
            },
          }
        };

        // hide everything, so we can format the columns better
        settings.hiddenAttributes.push('$$hashKey');
        for (var property in $scope.donations[0]) {
          if ($scope.donations[0].hasOwnProperty(property)) {
            settings.hiddenAttributes.push(property);
          }
        }

        if (savedTable) {
          $scope.pivotTable = savedTable;
        } else {
          $scope.pivotTable = {
            rows: ['donationDate'],
            cols: ['disbursementStatus'],
            aggregatorName: 'Donation Count',
            vals: ['receiptAmount'],
            rendererName: 'Table',
            aggregators: settings.aggregators,
            derivedAttributes: settings.derivedAttributes,
            hiddenAttributes: settings.hiddenAttributes,
          };
        }


        console.log($scope.pivotTable);

        $scope.pivotTable.data = $scope.donations;

        pivotInit= true;
      }
    };

如何将指令函数 onRefresh() 中的 config_copy 转换为可在 Controller 中访问的 $scope.saveState？

Answer 1

您可以像这样设置指令的范围部分:

scope: {
   saveState: "="
}

然后，每次您更改指令中的某些内容时，$scope.pivotTable 都会更新。