将数组作为指令参数传递

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

好吧，我想我在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。