ngMeteor view not activated inside conditional meteor template

[tseven]

I'm new to both Meteor and Angular, so I apologize in advance if this is not an issue with ngMeteor.

I have a very simple app with a conditional meteor template which looks like this:

<template name="main">
    <div id="keypad-container">
        {{#if selected_employee}}
            {{> numpad }}
        {{else}}
            {{> alphapad}}
        {{/if}}
    </div>
</template>

When an employee from the list is clicked I use Session.set('selected_employee', this._id); to trigger the template change above.

Inside the template "numpad"

    <div>
        <input id="pin" type="password" ng-model="enteredPin" />
        [[ enteredPin ]]
    </div>

This very simple directive only works once Meteor has been refreshed after a code change etc.

On initial load, I see the plain text: "[[ enteredPin ]]".

If I move the "numpad" template outside the if condition so the template loads with the app, then everything works as expected.

I've tried forcing angular to update by calling '$apply()' after the session variable is set:

Session.set('selected_employee', this._id);
$('#pin').scope().$apply();

but since Angular is not active in this view/template, the method "apply" doesn't exist.

I feel like I'm missing something since it seems logical to have the Angular view activate automatically.

Any suggestions are appreciated.

Thank you.

[loneleeandroo]

Hello :)

Yes I believe it is an issue with ngMeteor. When the template is outside the #if helper, AngularJS is able to compile the template because the template loads before the angular app is bootstraped, however, when you put the template inside the #if helper the template is re-rendered after the bootstrap so it doesn't go through the angular compilation process and all you see is the unlinked scope [[ enteredPin ]]. There was a similar problem with this when iron-router was routing the routes which i managed to fix, so i'll have a go at fixing this one as well :)

In the mean time, perhaps you might want to consider using the ng-if directive to conditionally load your template as an alternative to using the #if helper. They perform a very similar function.

[tseven]

Gotcha, I'll check out ng-if, thank you.