When you say "contents of the pane" ultimately that's a template bound to
the scope for interpolation.
If you cannot know the contents of the pane and say your loading the html
in via an http service, you would use $compile and inject into scope on the
pane directive.... this is not the easy way.
My example was the case when you know the possible elements/directives that
will display in the pane, hence customer directive is there but does not
have to be shown until it's needed (use ng-if or ng-switch or ng-hide) same
with any of the other directives and general elements in the pane's
template.
Again, the pane's template knows all possible conditions for what it could
display and then shows what it needs based on logic in the scope. This way
does not require dynamically loading the template, but only dynamically
showing what's needed. Much easier. With ng-repeat on pane you just push
a new object to the array that defines what will be displayed and any data
that is needed for those items:
$scope.panes.push({
type: 'customer',
customer: { name: 'Bob', account: 12345, items:[] }
})
]
$scope.panes.push({
type: 'item',
item: { id: 123, price: '1.25' }
})
<pane ng-repeat="pane in panes" style="float:left;>
<div ng-switch on="pane.type">
<div ng-switch-when="customer">
<customer="pane.customer" ></customer>
<item-list="item" ng-repeat="item in items">
<transaction="item.transaction">
<a ng-click="showCustomer(item.transaction.customer)">View
Customer</a>
</transaction>
</item-list>
</div>
<div ng-switch-when="item">
<item='pane.item'></item>
</div>
<div ng-switch-when="transactions">
<transaction-list ng-repeat="trans in transactions"></
transaction-list >
</div>
</<pane>
On Sat, Feb 22, 2014 at 5:05 AM, Jacob Valenta <[email protected]>wrote:
> Luke, I lose you at the <customer> directive. The contents of a pane is
> what I am trying to load dynamically.
>
> So 1 step is for the <pane> directive to retrieve the contents.
> But 2, the contents of the pane will have directives (like <customer>)
> that must be compiled,
>
> Am I correct?
>
>
> On Sat, Feb 22, 2014 at 2:27 AM, Luke Kende <[email protected]> wrote:
>
>> If I understand you correctly, I would do this with ng-repeat, since as
>> you add or remove data to the array, it would create new panes (or items,
>> or whatever).
>>
>> <pane ng-repeat="pane in panes" style="float:left;>
>> <customer="pane.customer"></customer>
>> <item="item" ng-repeat="item in items">
>> <transaction="item.transaction">
>> <a ng-click="showCustomer(item.transaction.customer)">View
>> Customer</a>
>> </transaction>
>> </item>
>> </<pane>
>>
>> function MyCtrl($scope, MyService)
>> {
>> $scope.panes = [
>> { items: [ { transaction: { customer: 1 }, transaction: { customer:
>> 3 } } ] , customer: 5},
>> { items: [ { transaction: { customer: 2 }, transaction: { customer:
>> 4 } } ] , customer 6 }
>> ];
>>
>> $scope.showCustomer(customerId){
>> var pane = MyService.getCustomer(customerId);
>> $scope.panes.push(pane);
>> }
>>
>> }
>>
>> On Friday, February 21, 2014 10:13:43 PM UTC-7, Alesei N wrote:
>>>
>>> I don't think you have to, if I understand you correctly, you can use
>>> either ng-if or ng-show. See documentation, but you could basically show
>>> these conditionally. NG-IF would be equivalent of conditional/dynamic
>>> rendering of any specific directive. NG-SHOW would basically set
>>> display:block on the parent element.
>>>
>> --
>> You received this message because you are subscribed to a topic in the
>> Google Groups "AngularJS" group.
>> To unsubscribe from this topic, visit
>> https://groups.google.com/d/topic/angular/WHSBzWsle2k/unsubscribe.
>> To unsubscribe from this group and all its topics, 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.
>>
>
>
>
> --
> Jacob Valenta
>
> --
> You received this message because you are subscribed to a topic in the
> Google Groups "AngularJS" group.
> To unsubscribe from this topic, visit
> https://groups.google.com/d/topic/angular/WHSBzWsle2k/unsubscribe.
> To unsubscribe from this group and all its topics, 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.
>
--
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.
