Question

我对Angular相对较新，并且陷入了自定义指令。我正在尝试创建一个动态网格作为自定义指令。我已经在这个例子中使用了那个部分：

在某些情况下，我需要在网格的某些元素上设置属性。这部分让我难过。我计划将属性作为数组包含在对象中，然后将其放在相关条目的html标记中。这部分在这里演示：

broken grid as custom directive with dynamic attributes

如果查看控制器中的“entries”数组，我现在已将其更改为包含“attributes”数组，该数组将包含指定属性名称和属性的对象。然后应将这些属性应用于关联列。

e.g。

(First entry of the array)
col1: {
  text: 'Obj1.col1',
  attributes: [{
    attr: 'ng-class',
    attrVal: 'propVal == "" ? "someClass" : "someOtherClass"'
  }, {
    attr: 'id',
    attrVal: '{{propName}}{{$index}}'
  }]
},
...Truncated for brevity

然后应将此数组条目转换为：

<td ng-class="propVal == '' ? 'someClass' : 'someOtherClass'" id="col11">Obj1.col1</td>

我已经阅读了几篇关于编译，控制器，预链接和后链接功能的执行顺序的文章，并且已经玩过不同的命令并尝试自己调用编译，但这一切都失败了。可能是因为我对它们如何联系起来缺乏更深刻的理解。如果有人可以帮我解决问题，或者如果我走的是错误的道路，那么我会非常感激。

Answer 1

好的，我终于想出了如何使用父自定义指令中的嵌入式自定义指令动态生成网格。

以下是一位了解我是如何做到的人：

Plunker with working dynamic grid

我将 Html模板定义为：

<div ng-grid ng-collection="entries" ng-collection-headings="headings" ng-button-click="theAction(inp)">
    <div ng-checkbox-column></div>
</div>

然后 ng-grid指令为：

.directive("ngGrid", function () {
    return {
        restrict: "A",
        scope: {
            ngCollectionHeadings: "=",
            ngCollection: "=",
            ngButtonClick: "&"
        },
        template: function (element, attrs) {
            var children = element.html();
            children = children.trim().replace(/div/g, "td");
            var htmlText = "<input type='button' ng-click='buttonClicked()' value='From the grid directive' /><table class='table table-bordered'><thead><tr><th ng-repeat='heading in ngCollectionHeadings'>{{heading}}</th></tr></thead><tbody><tr id='item{{$index}}' ng-repeat='item in ngCollection'>" + children + "</tr></tbody></table>";
            return htmlText;
        },
        controller: function ($scope, $element) {
            $scope.buttonClicked = function (inp) {
                if (typeof inp != 'undefined')
                  inp = inp + ", through the grid directive.";
                else
                  inp = "From the grid directive.";

                $scope.ngButtonClick({ inp: inp });
            };
        }
    };
})

最后是 ng-checkbox-column指令：

.directive("ngCheckboxColumn", function () {
    return {
        restrict: "A",
        template: function (element, attributes) {
            var htmlText = "<td><label><input type='checkbox' ng-model='item.checked' ng-click='tempButtonClicked()' /> From the checkbox directive.</label></td>";

            return htmlText;
        },
        controller: function ($scope, $element) {
          $scope.tempButtonClicked = function () {
              var val = "From the checkbox directive";
              $scope.buttonClicked(val);
          };
        }
    };
})

我的数据收藏非常简单：

$scope.headings = {
    head1: 'Heading 1',
    head2: 'Heading 2',
    head3: 'Heading 3'
};

$scope.entries = [{
    col1: 'Obj1.col1',
    col2: 'Obj1.col2',
    col3: 'Obj1.col3',
    checked: false
}, {
    col1: 'Obj2.col1',
    col2: 'Obj2.col2',
    col3: 'Obj2.col3',
    checked: false
}, {
    col1: 'Obj3.col1',
    col2: 'Obj3.col2',
    col3: 'Obj3.col3',
    checked: false
}, {
    col1: 'Obj4.col1',
    col2: 'Obj4.col2',
    col3: 'Obj4.col3',
    checked: false
}];

这还没有完全完成，但你应该得到基本的想法。

动态网格作为自定义指令

1 个答案: