Javascript 如何将角度指令中的值返回控制器中的$scope变量？

我正在使用angular-ua-pivot-table.js，我想将更新后的表信息保存在控制器中的$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\u copy的变量中。我想让我的控制器访问名为$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>

---

如何将config\u copy从指令函数onRefresh（）转换为可在控制器中访问的$scope.saveState？您可以这样设置指令的作用域部分：

scope: {
   saveState: "="
}

---

然后，每当您更改指令中的某些内容时，

$scope.pivotTable

将被更新。

您可以像这样设置指令的scope部分：

scope: {
   saveState: "="
}

---

然后，

$scope.pivotTable

将在每次更改指令内容时更新。

首先，您的指令是否与您的

控制器在同一
范围内？如果是这样，那么他们将共享
范围
，您只需将数据设置为
范围。myData
和您的
控制器
将有权访问该变量。您也可以使用
作用域访问控制器。$parent
如果指令嵌套或隔离在
控制器中
首先，您的指令是否与
控制器在同一
作用域中
？如果是这样，那么他们将共享
范围
，您只需将数据设置为
范围。myData
和您的
控制器
将有权访问该变量。如果指令嵌套或隔离在您的
控制器中，您也可以使用
作用域。$parent
访问控制器
以下是我为将来可能遇到类似问题的任何人解决此问题的方法

我在控制器中创建了此函数：

  $scope.savePivotTable = function (data) {
    console.log('SAVED!');
    $scope.savedPivotTable = data;
  }

将其添加到HTML模板中的“我的指令”：

<pivot-table id="pivotTable" class="table" 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"
    save-pivot-table="savePivotTable">
</pivot-table>

然后从onRefresh方法内部调用函数：

var pivotAttrs = $.extend({}, {
 rows: scope.rows ? scope.rows : undefined,
 cols: scope.cols ? scope.cols : undefined,
 aggregatorName: scope.aggregatorName ? scope.aggregatorName : undefined,
 vals: scope.vals ? scope.vals : undefined,
 rendererName: scope.rendererName ? scope.rendererName : undefined,
 aggregators: scope.aggregators ? scope.aggregators : undefined,
 derivedAttributes: finalDerived ? finalDerived : undefined,
 hiddenAttributes: scope.hiddenAttributes ? scope.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"];
    scope.savePivotTable(config_copy);
    $("#output").text(JSON.stringify(config_copy, undefined, 2));
    }
});

这给了我访问的机会
以下是我如何为将来可能遇到类似问题的人解决这个问题的

我在控制器中创建了此函数：

  $scope.savePivotTable = function (data) {
    console.log('SAVED!');
    $scope.savedPivotTable = data;
  }

将其添加到HTML模板中的“我的指令”：

<pivot-table id="pivotTable" class="table" 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"
    save-pivot-table="savePivotTable">
</pivot-table>

然后从onRefresh方法内部调用函数：

var pivotAttrs = $.extend({}, {
 rows: scope.rows ? scope.rows : undefined,
 cols: scope.cols ? scope.cols : undefined,
 aggregatorName: scope.aggregatorName ? scope.aggregatorName : undefined,
 vals: scope.vals ? scope.vals : undefined,
 rendererName: scope.rendererName ? scope.rendererName : undefined,
 aggregators: scope.aggregators ? scope.aggregators : undefined,
 derivedAttributes: finalDerived ? finalDerived : undefined,
 hiddenAttributes: scope.hiddenAttributes ? scope.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"];
    scope.savePivotTable(config_copy);
    $("#output").text(JSON.stringify(config_copy, undefined, 2));
    }
});

这给了我进入的机会