从范围变量传递 HandsonTable Angular 指令 <<ui-handsontable> 中的属性答案

【问题标题】：Passing Attributes in HandsonTable Angular Directive <<ui-handsontable> from scope variable从范围变量传递 HandsonTable Angular 指令 <<ui-handsontable> 中的属性
【发布时间】：2014-02-25 05:08:57
【问题描述】：

我在我的项目中使用handsontable angular 指令。通常我们将handsontable 定义为

<ui-handsontable minSpareRows="2" stretchH="'hybrid'" datarows="item in items">

我想从范围变量中获得像 minSpareRows 这样的属性值，比如

我试过了

minSpareRows={{minrows}}
ng-attr-minSpareRows="{{minrows}}"

请指导。

【问题讨论】：

标签： javascript angularjs handsontable

【解决方案1】：

您究竟想要这些属性在哪里？你可以这样做：

angular.module('yourApp')
 .directive('uiHandsontable', function () {
    return {
        restrict: 'E',
        link: function postLink(scope, element, attrs) {
          scope.minSpareRows = attrs.minSpareRows
        }
    };
});

这会将它附加到指令的范围内，因此在指令的 html 模板中，您可以调用 {{minSpareRows}}

【讨论】：

谢谢。我会试一试，让你知道。

【解决方案2】：

我遇到了这个post。一位回答说：

神奇之处主要在于作用域：指令中的声明定义。有任何范围：{} 将“隔离”范围来自父母，这意味着它有自己的范围......没有它，它将使用父级的范围。其余的魔法在范围内属性：范围：{'internalScopeProperty'： '=externalAttributeName' }... 其中 = 表示双向绑定设想。如果您将 = 更改为 @ 您会看到它只允许您将字符串作为属性传递给指令。 & 用于执行父作用域上下文中的函数。

所以我去了handsontable angular指令“angular-ui-handsontable.full.js”的代码并更改了行

var htOptions = ['data', 'width', 'height', 'rowHeaders', 'colHeaders', 'colWidths', 'columns', 'cells', 'dataSchema', 'contextMenu', 'onSelection', 'onSelectionByProp', 'onBeforeChange', 'onChange', 'onCopyLimit', 'startRows', 'startCols', 'minRows', 'minCols', 'maxRows', 'maxCols', 'minSpareRows', 'minSpareCols', 'multiSelect', 'fillHandle', 'undo', 'outsideClickDeselects', 'enterBeginsEditing', 'enterMoves', 'tabMoves', 'autoWrapRow', 'autoWrapCol', 'copyRowsLimit', 'copyColsLimit', 'currentRowClassName', 'currentColClassName', 'asyncRendering', 'stretchH', 'columnSorting', 'manualColumnMove', 'manualColumnResize', 'fragmentSelection', 'scrollbarModelV', 'scrollbarModelH'];

var scopeDef = {
  selectedIndex: '=selectedindex'
};
for (var i = 0, ilen = htOptions.length; i < ilen; i++) {
  scopeDef[htOptions[i]] = '=' + htOptions[i].toLowerCase();
}

与

var htOptions = ['data', 'width', 'height', 'rowHeaders', 'colHeaders', 'colWidths', 'columns', 'cells', 'dataSchema', 'contextMenu', 'onSelection', 'onSelectionByProp', 'onBeforeChange', 'onChange', 'onCopyLimit', 'startRows', 'startCols', 'minRows', 'minCols', 'maxRows', 'maxCols', 'minSpareRows', 'minSpareCols', 'multiSelect', 'fillHandle', 'undo', 'outsideClickDeselects', 'enterBeginsEditing', 'enterMoves', 'tabMoves', 'autoWrapRow', 'autoWrapCol', 'copyRowsLimit', 'copyColsLimit', 'currentRowClassName', 'currentColClassName', 'asyncRendering', 'stretchH', 'columnSorting', 'manualColumnMove', 'manualColumnResize', 'fragmentSelection', 'scrollbarModelV', 'scrollbarModelH'];
var scopeDef = {
  selectedIndex: '=selectedindex'
};
for (var i = 0, ilen = htOptions.length; i < ilen; i++) {
  scopeDef[htOptions[i]] = '@' + htOptions[i].toLowerCase();
}

然后当我使用时

<ui-handsontable minSpareRows="{{cx}}" stretchH="'hybrid'" datarows="item in items">

成功了。我把它放在handsontable github上的请求上。

【讨论】：