1

I've been struggling with this for quite some time and I can't figure out how to resolve this issue.

I'm trying to make a grid directive which contains column directives to describe the grid but the columns won't be elements and would just add the columns to the array that is declared on the scope of the grid directive.

I think the best way to explain this issue is to view view the code:

var myApp = angular.module('myApp', [])

    .controller('myCtrl', function ($scope, $http) {
    })
    .directive('mygrid', function () {
        return {
            restrict: "E",
            scope: true,
            compile: function ($scope) {
                debugger;
                $scope.Data = {};
                $scope.Data.currentPage = 1;
                $scope.Data.rowsPerPage = 10;
                $scope.Data.startPage = 1;
                $scope.Data.endPage = 5;
                $scope.Data.totalRecords = 0;
                $scope.Data.tableData = {};
                $scope.Data.columns = [];
            },
            replace: true,
            templateUrl: 'mygrid.html',
            transclude: true
        };
    })
    .directive('column', function () {
        return {
            restrict: "E",
            scope: true,
            controller: function ($scope) {
                debugger;
                $scope.Data.columns.push({
                    name: attrs.name
                });

            }
        };
    });

And here is the HTML markup:

<body ng-app="myApp">
<div ng-controller="myCtrl">
    <input type="text" ng-model="filterGrid" />
    <mygrid>
        <column name="id">ID</column>
        <column name="name">Name</column>
        <column name="type">Type</column>
        <column name="created">Created</column>
        <column name="updated">Updated</column>
    </mygrid>
</div>

In addition, you can test the actual code in jsfiddle: http://jsfiddle.net/BarrCode/aNU5h/

I tried using compile, controller and link but for some reason the columns of the parent grid are undefined.

How can I fix that?

Edit: When I remove the replace, templateUrl, transclude from the mygrid directive, I can get the scope from the column directive.

Thanks

4

3 回答 3

1

在 AngularJS 的更高版本中，我发现 $scope.$$childHead 可以满足我的要求。

它仍然是新的，但它也适用于具有隔离范围的指令。

所以在 Columns 指令中你可以这样做：

$scope.$$childHead.Data.columns.push({
                    name: attrs.name
                });

只需确保在网格编译后执行此命令即可。您可以这样做，但在编译、链接和控制器之间切换，因为它们中的每一个都有不同的加载优先级。

于 2013-12-28T09:46:58.833 回答
0

我知道您要做什么，但是使用column指令可能不是解决问题的最佳方法。

您正在尝试grid使用可自定义的列定义指令。每列都有 2 条相关信息：用于访问行数据中的值的键和要显示的标题。

暂时忽略所有与分页相关的东西，这是解决问题的另一种方法。

首先，让我们使用属性来定义列信息，因此我们的 HTML 如下所示：

<body ng-app='app' ng-controller='Main'>
    <grid col-keys='id,name,type'
          col-titles='ID,Name,Type'
          rows='rows'>
    </grid>
</body>

对于 JS，我们显然需要app模块：

var app = angular.module('app', []);

这是grid指令。它使用隔离作用域，但使用=2-way 绑定从其父作用域获取行数据。attrs请注意链接函数如何从对象中提取列信息。

模板变得非常简单：遍历列标题以定义标题，然后遍历rows，并在每一行中遍历列键。

app.directive('grid', function() {
    return {
        restrict: 'E',
        scope: {
            rows: '='            
        },
        link: function(scope, element, attrs) {
            scope.colKeys = attrs.colKeys.split(',');
            scope.colTitles = attrs.colTitles.split(',');
        },
        replace: true,
        template:
            '<table>' +
            '  <thead>' +
            '    <tr>' +
            '      <th ng-repeat="title in colTitles">{{title}}</th>' +
            '    </tr>' +
            '  </thead>' +
            '  <tbody>' +
            '    <tr ng-repeat="row in rows">' +
            '      <td ng-repeat="key in colKeys">{{row[key]}}</td>' +
            '    </tr>' +
            '  </tbody>' +
            '</table>'
    };
});

和一些示例数据开始。

app.controller('Main', function($scope) {
    $scope.rows = [
        {id: 1, name: 'First', type: 'adjective'},
        {id: 2, name: 'Secondly', type: 'adverb'},
        {id: 3, name: 'Three', type: 'noun'}
    ];
});

这是小提琴的形式。

于 2013-05-27T16:40:54.643 回答
0

正如 Imri 评论的：

在 AngularJS 的更高版本中，您可以通过使用获取父指令$scope.$$childHead

我还没有测试过。

于 2013-12-26T06:32:51.830 回答