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:

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.

回答1:

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.

来源：https://stackoverflow.com/questions/29085223/dynamic-grid-as-custom-directive