I am relatively new to Kangaroo and stuck on custom instructions. I am trying to create a dynamic grid as a custom directive. I have already had to work as part of this:
There are some scenarios where I need to set the attributes on some elements of the grid. This part has me Stumped I am planning to include attributes in the form of an array inside the object and then putting it in the html tag of the affiliate entry. This section is shown here:
If you look at the "entries" array in the controller, then I have now changed it to include an "attributes" array In which the property properties and properties should be applied to these related columns then the corresponding columns.
For example
(first entry of the array) col1: {text: 'Obj1.col1', attributes: [{atri: 'ng-class', attriv : 'Probaul =='? "SomeClass": "someOtherClass" '}, {attr:' id ', attrVal:' {{propName}} {{$ index}} '}]}, ... Sorting for a brief
This array entry should be translated into:
& lt; Td ng-class = "propVal ==" 'some class': 'someOtherClass' "id =" col11 "& gt; Obj1.col1 & lt; / TD & gt;
I have read some articles about executing orders for compilation, controller, pre-link and post-link functions and play with different commands and try to compile themselves. , But all this has failed, probably because I do not understand the depth of how it all are relation together. If someone can help me in the right direction or point in the right direction, if I am going on the wrong path, then I appreciate it.
OK, in the end I thought how using an embedded custom instructions inside an original custom command Grid should be generated in a grid dynamically.
Here is a show that shows how I did this:
I have HTML templates defined:
& lt; Div ng-grid ng-collection = "entries" ng -collection- headings = "headings" ng-button-click = "the action (INP)" & gt; & Lt; Div ng-checkbox-column & gt; & Lt; / Div & gt; & Lt; / Div & gt;
and then as ng-grid directive :
. (NgCollectionHeadings: "=", ngCollection: "=", ngButtonClick: "& amp;"}, Template: function (element, etters); directive ("ngGrid", function () {return: restricted: "A", scope: {Var children = element.html (); Kids = Children (.trim) Copy (/ div / g, "td"); var htmlText = "& lt; input type = 'button' ng-click = 'button clicked ( ) 'Value' = Grid Directive '/> & lt; {{Heading}} & lt; / th & gt; & lt; / tr & gt; & lt; Table Category =' Table Table-boundary '&' Gt; & lt; thead & gt; & lt; tr & gt; & lt; th ng-repeat = 'heading ng cloling heading'; / tad & Gt; TDA & gt; & lt; tr id = 'item {{$ index}}' ng-repeat = 'item in nigulation' & gt; "+ children +" & lt; / tr & gt; & lt; / Tag & gt; & lt; / table & gt; "; HTMLText;} Return, Controller: Function ($ area, $ element) {$ scope.buttonClicked = function (inp) {if (typeof inp! = 'Undefined' ); Inp = inp + ", via grid instruction."; Else inp = "From the grid instruction."; $ Scope.ngButtonClick ({inp: inp});}}}};})
and finally ng-checkbox-column director : .directive ("ngCheckboxColumn", function () {return {restricted: "A" , Template: Function (L Ermines, attributes) {var htmlText = "& lt; Td> & Lt; Label & gt; Input type = 'checkbox' ng-model = 'item.checked' ng-click = 'TempButtonClicked ()' /> From the checkbox directive. & Lt; / Labels & gt; & Lt; / Td> "HTML Text; Return; Controller: Function ($ Scope, $ element) {$ scope.tempButtonClicked = function} {Var val =" From checkbox directive "; $ scope.buttonClicked (val);}}}}}}
My data collection is very straight forward:
$ scope.headings = {head1: 'title1', head 2: 'Heading 2', Head 3: 'Heading 3'}; $ Scope.entries = [{col1: 'Obj1.col1', col2: 'Obj1.col2', col3: 'Obj1.col3', checked : Incorrect}, {col1: 'Obj2.col1', col2: 'Obj2. Col2', col3: 'Obj2.col3', checked: incorrect}, {col1: 'Obj3.col1', col2: 'Obj3. Col2 ', col3:' Obj3.col3 ', checked: incorrect}, {col1:' Obj4.col1 ', col2:' Obj4.col2 ', col3:' Obj4.col3 ', f OK: It is still not completely completed, but you should get the original idea.