动态网格自定义指令 [英] dynamic grid as custom directive

问题描述

我是比较新的角度和被困的自定义指令。
我想创建一个动态网格作为一个自定义指令。
我已经得到了这部分工作作为在这个例子：

I am relatively new to Angular and got stuck on a custom directive. I am trying to create a dynamic grid as a custom directive. I already got that part working as in this example:

工作网格，自定义指令

有某些情况下，我需要一些电网的元素设置的属性。
本部分让我难住了。
我计划包括属性作为对象内部的数组，然后只是把它在相关条目的HTML标记。
这部分是展示位置：

There are certain scenarios where I need to set attributes on some of the elements of the grid. This part has got me stumped. I am planning on including the attributes as an array inside the object and then just putting it in the html tag of the associated entry. This part is demonstrated here:

断网与动态属性自定义指令

如果你看一下在控制器中的项阵，我现在已经改成了包括属性数组其中将包含指定属性名称和属性的对象。然后这些属性应该被应用到相关联的列

If you look at the "entries" array in the controller, I have now changed it to include an "attributes" array which will contain objects specifying the attribute name and property. These attributes should then be applied to the associated column.

例如

(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

然后，这个数组项应翻译为：

This array entry should then be translated to:

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

我看过一对夫妇约编译器，控制器，pre-Link和连杆后函数的执行顺序的文章并与不同的顺序发挥各地，并试图调用编译自己，但一切都已经失败。
可能是因为我缺乏的是如何更深入地了解一切联系在一起。
如果有人能帮助我，或点我在正确的方向，如果我得走错了路，我将不胜AP preciate这一点。

I have read a couple of articles about the execution order of compile, controller, pre-link and post-link functions and have played around with different orders and trying to invoke compiling myself, but it all has failed. Probably because I lack a deeper understanding of how it all ties together. If someone can help me out or point me in the right direction if I'm heading down the wrong path, I would greatly appreciate that.

推荐答案

好吧，我终于想通了如何动态生成网格使用父定制指令内嵌入自定义的指令。

Okay, I finally figured out how to generate the grid dynamically using embedded custom directives inside a parent custom directive.

下面是plunker展示我是如何做的：

Here is a plunker showing how I did it:

Plunker有工作动态网格

我在 HTML模板定义为：

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

，然后在 NG-格指令为：

.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-复选框列指令

.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);
          };
        }
    };
})

我的数据收集是pretty直截了当：

My data collections are pretty straight forward:

$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
}];

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

This is still not entirely completed, but you should get the basic idea.

这篇关于动态网格自定义指令的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！