I'm using the inspector-gadget
AngularUI module as a footer cell of a Angular UI Grid
Here's the markup:
<div class="ui-grid-cell-contents" col-index="renderIndex">
<inspector-gadget data-container="body" data-placement="bottom" ng-controller="FooterCtrl">
<a id="{{ 'popover-' + col.field }}" name="{{ col.displayName }}">{{ col.getAggregationValue() }}</a>
<inspector-title style="width: 100%">
<span class="text-info"><strong>{{ col.field }}</strong></span>
</inspector-title>
<inspector-content>
<div>
<select class="form-control" popover ng-model="col.colDef.stat" ng-options="stat as stat for stat in col.getRenderContainer().grid.stats"></select>
<input type="text" placeholder="Name" class="form-control" maxlength="5">
</div>
</inspector-content>
</inspector-gadget>
</div>
UI grid passes the col
variable to the outermost scope here but it fails to show up in the inner scopes. I was expecting it'd be visible to the inner scopes for inspector-content
and inspector title
as well.
Plunkr with the issue here.
See how {{ col.field }}
isn't rendered.