动态网格作为自定义指令 [英] dynamic grid as custom directive
问题描述
我对 Angular 比较陌生，并且被一个自定义指令卡住了.我正在尝试创建一个动态网格作为自定义指令.我已经让那部分像这个例子一样工作了:
在某些情况下，我需要为网格的某些元素设置属性.这部分让我难住了.我计划将属性作为数组包含在对象中，然后将其放入关联条目的 html 标记中.这部分在这里演示:
如果您查看控制器中的条目"数组，我现在已将其更改为包含一个属性"数组，该数组将包含指定属性名称和属性的对象.然后应将这些属性应用于关联的列.
例如
(数组的第一个条目)第 1 列:{文本:'Obj1.col1'，属性: [{attr: 'ng-class',attrVal: 'propVal == "" ?"someClass" : "someOtherClass"'}, {attr: 'id',attrVal: '{{propName}}{{$index}}'}]},...为简洁起见被截断这个数组条目应该被翻译成:
<td ng-class="propVal == '' ? 'someClass' : 'someOtherClass'" id="col11">Obj1.col1</td>我已经阅读了几篇关于编译、控制器、预链接和后链接函数的执行顺序的文章，并尝试了不同的顺序并尝试自己调用编译，但都失败了.可能是因为我对这一切如何联系在一起缺乏更深入的了解.如果我走错了路，如果有人能帮助我或指出正确的方向，我将不胜感激.
好吧，我终于想出了如何使用父自定义指令中的嵌入自定义指令动态生成网格.
这是一个展示我是如何做到的:
我将 Html 模板定义为:
<div ng-checkbox-column></div>然后是 ng-grid 指令:
.directive("ngGrid", function () {返回 {限制:A"，范围: {ngCollectionHeadings:="，ngCollection:="，ngButtonClick: "&"},模板:函数(元素，属性){var children = element.html();children = children.trim().replace(/div/g, "td");var htmlText = "<input type='button' ng-click='buttonClicked()' value='来自网格指令'/><table class='table table-bordered'><thead><;tr><th ng-repeat='heading in ngCollectionHeadings'>{{heading}}</th></tr></thead><tbody><tr id='item{{$index}}' ng-repeat='ngCollection 中的项目'>"+ 儿童 + "</tr></tbody></table>";返回 htmlText;},控制器:函数($scope，$element){$scope.buttonClicked = 函数(输入){if (typeof inp != 'undefined')inp = inp + "，通过 grid 指令.";别的inp = "来自网格指令.";$scope.ngButtonClick({ inp: inp });};}};})最后是 ng-checkbox-column 指令:
.directive("ngCheckboxColumn", function () {返回 {限制:A"，模板:函数(元素，属性){var htmlText = "<td><label><input type='checkbox' ng-model='item.checked' ng-click='tempButtonClicked()'/>来自复选框指令.</label>;</td>";返回 htmlText;},控制器:函数($scope，$element){$scope.tempButtonClicked = function () {var val = "来自复选框指令";$scope.buttonClicked(val);};}};})我的数据收集非常简单:
$scope.headings = {head1: '标题 1',head2: '标题 2',head3: '标题 3'};$scope.entries = [{col1: 'obj1.col1',col2: 'obj1.col2',col3: 'obj1.col3',检查:错误}, {col1: 'obj2.col1',col2: 'obj2.col2',col3: 'obj2.col3',检查:错误}, {col1: 'obj3.col1',col2: 'obj3.col2',col3: 'obj3.col3',检查:错误}, {col1: 'obj4.col1',col2: 'obj4.col2',col3: 'obj4.col3',检查:错误}];这还没有完全完成，但您应该了解基本概念.
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:
working grid as custom directive
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:
broken grid as custom directive with dynamic attributes
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.
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
This array entry should then be translated to:
<td ng-class="propVal == '' ? 'someClass' : 'someOtherClass'" id="col11">Obj1.col1</td>
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.
Here is a plunker showing how I did it:
Plunker with working dynamic grid
I have the Html templates defined as:
<div ng-grid ng-collection="entries" ng-collection-headings="headings" ng-button-click="theAction(inp)">
<div ng-checkbox-column></div>
</div>
and then the ng-grid directive as:
.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 });
};
}
};
})
and finally the ng-checkbox-column directive:
.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);
};
}
};
})
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屋！
