Question

据说，我有一个范围

的指令

scope: {
   columns: '=',
}

我怎样才能做到这一点？

<my-directive columns="[{ field:'id', displayName: 'ID' },
                            { field:'title', displayName: 'Title' },
                            { field:'address', displayName: 'Address' },
                            { field:'city', displayName: 'City' }]" />

显然Angular的编译器在弄清楚它是一个数组时遇到了问题，尽管它没有通过这种方式传递标准JS对象的问题 - {}。有什么好的方法可以做到这一点吗？它与物体一起工作的事实是巧合吗？

请记住我知道，我可以在Controller中将其设置为$ scope参数，并仅从$ scope传递参数名称。但我真的想知道是否可以直接从HTML中完成。

- 使用完整代码进行更新：

这就是它在模板中的使用方式

<es-paged-data-grid columns="[
                                { field:'id', displayName: 'ID' },
                                { field:'title', displayName: 'Title' },
                                { field:'address', displayName: 'Address' },
                                { field:'city', displayName: 'City' }
                            ]">
</es-paged-data-grid>

这是指令：

app.directive('esPagedDataGrid', function () {
    var definition = {
        restrict: "E",
        replace: false,
        transclude: true,
        scope: {
            columns: '=',
        },
        templateUrl: 'application/directive/pagedDataGrid/PagedDataGrid.html',
        controller: ['$scope', '$element', '$attrs', '$transclude', function($scope, $element, $attrs, $transclude) {

            var dataGridOptions = {};

            if ($scope.columns) {
                dataGridOptions.columnDefs = $scope.columns;
            }

            $scope.dataGridOptions = dataGridOptions;
        }]
    };

    return definition;
});

这是指令的模板：

<div ng-grid="dataGridOptions">
</div>

Answer 1

AFAIK我认为在DOM中初始化数据的方法是使用ng-init指令。所以指令看起来像，

app.directive('testd', function() {
  return {
    scope: {
      options: "=ngInit"
    },
    link: function(scope, e, a) {
      console.log('test', scope.options);
    },
    template: 'test'
  };
});

您可以通过ng-init，

提供阵列

<div testd ng-init="[{ field:'id', displayName: 'ID' },
                            { field:'title', displayName: 'Title' },
                            { field:'address', displayName: 'Address' },
                            { field:'city', displayName: 'City' }]"></div>

示例演示： http://plnkr.co/edit/MwOPLm16KTOr2Q3rY6LK?p=preview

还有一种方法是通过属性传递它。虽然它将被视为字符串，但您可以使用eval（）将其转换为对象并将其分配给范围变量。 Plnkr也因此而更新。包含columns:"@"并使用eval(attrs.columns)将其转换为数组

Answer 2

您在其中一条评论中提到过，您的指令会引发nonassign错误。当指令尝试修改使用nonassign表示法定义的隔离范围时发生=错误，其中指定的属性是不是双向数据绑定的表达式（不是范围变量）。

可能在您的指令中某处，您可能试图直接更改scope.columns，例如scope.columns = [];或通过=表示法分配的任何其他范围属性。尝试删除它，它可能会解决您的问题。

更新：

尝试更改此内容：

 dataGridOptions.columnDefs = $scope.columns;

到此：

 dataGridOptions.columnDefs = angular.copy($scope.columns);

我怀疑ng-grid指令可能正在对columnDefs选项进行一些操作，因为columnDefs具有对$ scope.columns属性的直接引用，然后在columnDefs选项中执行的任何操作都可能影响$ scope.columns。

将数组作为指令参数传递

2 个答案: