feature : allow dynamic ion-nav-view name

[calendee]

allow the name attribute to be evaluated as an angularjs expression

Issue #1503

Signed-off-by: Justin Noel github@calendee.com

[perrygovier]

Hey @ajoslin can you take a look? I don't have access to shippable to see why it's failing.

[ajoslin]

This won't work because it's trying to evaluate the name.

It will treat ion-nav-view name="something" as an expression, attempting to interpret something as a variable.

Instead, we would have to interpolate the name: ion-nav-view name="{{something}}" - this will interpret "something" as a string, and "{{something}}" as a variable.

Unfortunately, we cannot add this feature to the current nav system. Many things rely upon the nav view's name not changing. In the future? Perhaps.

[calendee]

@ajoslin Ahhh.. I overlooked that aspect.

Would you consider something like this where name is not included, but dynamic-name is:

<ion-nav-view dynamic-name="something"></ion-nav-view>

Then,

name = scope.$eval(attr.dynamicName) || attr[directive.name] || attr.name || '',

The directive would eval dynamic-name if it exists and if not, use the name that most developers would be using.

Then, the directive would support either of these :

<ion-nav-view name="something"></ion-nav-view>

or

<ion-nav-view dynamic-name="something"></ion-nav-view>

If so, I can submit another pull request.

[brianfoody]

Hi,

I've created my own directive to compile in the ion-nav-view with the name I want.

.directive('dynamicNavView', function($compile) {
    return {
        restrict: 'ECA',
        priority: -400,
        link: function(scope, $element, $attr, ctrl) {
            var dynamicName = scope.$eval($attr.name);
            $element.html('<ion-nav-view name="' + dynamicName + '"></ion-nav-view>');
            $compile($element.contents())(scope);
        }
    };
});

and then in my html;

<div ng-repeat="tab in myCtrl.tabs">
    <dynamic-nav-view name="tab"></dynamic-nav-view>
</div>

I presume this will be okay if myCtrl.tabs is initialised once and never touched?

Cheers

[alexweber]

@brianfoody awesome, thanks for sharing! I'm gonna give this a try when I can, looks brilliant...

[miqmago]

@brianfoody brilliant!

For me it makes sense to change scope.$eval($attr.name) by $attr.name and
<dynamic-nav-view name="tab"></dynamic-nav-view> by <dynamic-nav-view name="{{tab}}"></dynamic-nav-view> (Hopefully it's the same!)

[Abhisht12]

I tried to write out the entire HTML by updating the text inside the $element.html() function to include the whole segment from '<ion-tabs>' to '</ion-tabs>' instead of just the nav-view inside the ion-tab and I found it works perfectly well(even the history functionality seems to be working perfectly) without any issues so far. I am sure it needs a lot more testing, but if it is being initialized just once, it seems to work just fine.

[julitroalves]

Thanks guys, you help me a lot!