将角度指令选项设置为子标签

Question

我现在正在学习 AngularJs，并尝试编写我的第一个指令。

所以我有一个问题：有没有办法将复杂的选项传递给指令。例如，我想为光滑网格编写指令包装器。它有很多选项，例如列，并且不可能使用属性对其进行配置。我可以这样做吗？

<s-grid>
    <s-grid-columns>
        <s-grid-column id="title" title="Title"/>
        <s-grid-column id="duration" title="Duration"/>
    </s-grid-columns>
    ...
</s-grid>

并在 s-grid 指令中将所有这些属性作为 json 对象获取？

Answer 1

所以我可以做到。这里是不是有什么错误？

module
.directive('sGrid', [function () {
    return {
        restrict: 'E',
        controller: function($scope) {
            $scope.columns = [];

            this.setColumns = function(columns) {
                $scope.columns = columns;
            };
        },
        link: function (scope, element, attrs, controller, transclude) {
            // for clearer present I initialize data right in directive
            // start init data
            var columns = scope.columns;

            var options = {
                enableCellNavigation: true,
                enableColumnReorder: true
            };
            var data = [];
            for (var i = 0; i < 50000; i++) {
                var d = (data[i] = {});

                d["id"] = "id_" + i;
                d["num"] = i;
                d["title"] = "Task " + i;
                d["duration"] = "5 days";
                d["percentComplete"] = Math.round(Math.random() * 100);
                d["start"] = "01/01/2009";
                d["finish"] = "01/05/2009";
                d["effortDriven"] = (i % 5 == 0);
            }
            // end init data

            // finally render layout
            scope.grid = new Slick.Grid(element, data, columns, options);

            $(window).resize(function () {
                scope.grid.resizeCanvas();
            })
        }
    }
}])
.directive("sGridColumns", function(){
    return {
        require: '^sGrid',
        restrict: 'E',
        controller: function($scope) {
            var columns = $scope.columns = [];

            this.addColumn = function(pane) {
                columns.push(pane);
            };
        },
        link: function (scope, element, attrs, gridCtrl){
            gridCtrl.setColumns(scope.columns);
        }
    }
})
.directive('sGridColumn', function() {
    return {
        require: '^sGridColumns',
        restrict: 'E',
        transclude: 'element',
        link: function (scope, element, attrs, gridCtrl) {

            scope.field = scope.field || scope.id;
            scope.title = scope.title || scope.field;

            gridCtrl.addColumn({
                id: attrs.id,
                field: attrs.field || attrs.id,
                name: attrs.name || attrs.field || attrs.id
            });
        }
    };
});

及声明：

<s-grid>
    <s-grid-columns>
        <s-grid-column id="title" name="Title"></s-grid-column>
        <s-grid-column id="duration" name="Duration"></s-grid-column>
    </s-grid-columns>
</s-grid>