We have an api where we can get named 'collections' related to an object.
I'm trying to create something where I can list out the available
collections as tabs and have the content of each tab pane be customizable,
e.g. we get 'collectionA' for an object then we need to show a table with
columns specific to As vs 'collectionB' and needing to show a non-tabular
view of a collection of Bs.
I'm trying to write custom directives to encapsulate this behavior.
What I have so far:
The mt-collections directive uses the following for its template:
<div>
<ul class="nav nav-tabs">
<li ng-repeat="collection in collections" ng-class="{active:
collection.active}"><a ng-href="#{{collection.collectionId}}"
data-toggle="tab">{{collection.collectionTitle}} <span
class="badge">{{collection.count}}</span></a></li>
</ul>
<div class="tab-content" ng-transclude/>
</div>
The mt-collection directive uses the following for its template:
<div class="tab-pane" id="{{collectionId}}" ng-transclude>
</div>
The thought was to use it as follows:
<mt-collections source-id="id1">
<mt-collection collection-id="A" collection-title="A Fantastic
Collection of As">
<div ng-include="'a.html'"></div>
</mt-collection>
<mt-collection collection-id="B" collection-title="Da Bs">
<div ng-include="'b.html'"></div>
</mt-collection>
</mt-collections>
In a.html
<div ng-repeat="the_a in collection_A">
{{the_a.name}} - {{the_a.some_attribute}}
</div>
In b.html
<div ng-repeat="the_b in collection_B">
{{the_b.specialty}} - {{the_b.some_other_attribute}}
</div>
The mtCollections directive looks like:
return {
restrict: 'E',
scope: {
sourceId: "="
},
templateUrl: 'directives/collections.html',
replace: true,
transclude: true,
controller: function($scope, collectionsService) {
var self = this;
self.addCollection = function(collection) {
//loadCollection is an async call that is fulfilled via promises
//removing all that for the sake of brevity.
//note: collection is the scope object from the child mtCollection
directive
var loadedCollection =
collectionsService.loadCollection(collection.collectionId);
collection['collection_' + collection.collectionId] =
loadedCollection;
}
}
}
The mtCollection directive looks like:
return {
restrict: "E",
scope: {
collectionId: "@",
collectionTitle: "@"
},
require: "^mtCollections",
replace: true,
transclude: true,
templateUrl: "directives/collection.html",
link: function(scope, element, attrs, collectionsCtrl) {
collectionsCtrl.addCollection(scope);
}
}
My problem is that this doesn't work. In mtCollections -> collections ->
addCollection, setting collection['collection_' + collection.collectionId]
and then trying to reference it from a.html or b.html renders nothing
(there are results returned from loadCollection). I realize relying on
magic naming conventions may not be a great idea here, and I have the
feeling that this has to do with the isolate scopes setup in the directives
with the transclusion and ng-includes. Is there anything I'm missing? I'm
not sold on this solution, so if someone has a better one I'm all ears.
Thanks in advance!
--m
--
You received this message because you are subscribed to the Google Groups
"AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/groups/opt_out.
